Forum Academy Marketplace Showcase Pricing Features

Swatch feature input

I’m building a CRM feature in my app and I want to make the task border colour change depending on which colour the user selects in a RG on an edit popup:

image
this is the editor view

image
This is the preview

image
These are the colours based on hex codes

So I have a conditional on the task that says when the colour of the task is empty, the border should be empty too.

But I want to make the border change colours when a user selects a certain colour here.

Would anyone know how the backed may look like for this?

Hi @alasadi.m1738,
so as I understand correctly, you already have the colour field on the Task and just looking for a way to dynamically change the border color on click so the user can see it right away before saving the changes?

1 Like

Yep, on the task, there’s no save button as of yet.

I want to make it so that as soon as the user clicks on one of these:
image

The border of the task/entry also changes with it:
image

Like this:
image

Here’s the conditions I have on the task/entry:

Hope this helps you understand.

Thanks,
Mohamad

On colour click, you could probably set a custom state somewhere with the relevant color as its value.
And then if that custom state is not empty, set border color-top’s value to that custom state rather than task’s colour from the DB.

Great suggestion - I see how it might work but I’m running into an error:

image

I can’t seem to get the value to turn blue.

Hovering over the word ‘hex’ in that expressions says evaluate to text though.

Hope this makes sense.

Thanks,
Mohamad

Have you set the custom state type to text?

I’ve set it to the group in the repeating group which show the colors.

I’ve set it to the group in the repeating group which show the colors.

I’m not sure about your elements hierarchy and types, could you share the editor? Here or in the DM

image

I’m not sure what you might be looking for specifically, but essentially, there’s a drag/drop area with a RG in it, inside that RG there’s a draggable group which is the task/entry.

Then when the edit icon (pen) is clicked, the pop up where you can change the colour comes up.

There’s a group with 6 colours based from an option set where the attribute is a hex code.

@alasadi.m1738 Try to set the custom state on RepeatingGroup Colours or some other element that can be referenced from Draggable Task (entry) and set the data type of that custom state to the Colours option set. You can name it ex. “selectedColour”. Then from the conditional tab, in border color - top get it like “element’s selectedColour’s hex”.

BTW. If you have colours option set, it’d probably be better if your Task’s Task colour also be of that option set data type, not just text.

Hey @alanpieczonka

I’m not 100% sure what you mean by that sentence at the end.

I’m going to try and implement what you’ve mentioned at the top though.

Thanks,
Mohamad

Hey @alanpieczonka

I made it work! But now the problem is that when you exit the page, then go back on it, the custom state is gone.

Would you know how to save the custom state so it doesn’t change when you exit the page?

@alasadi.m1738 You should probably save it in Task’s Task colour field.