And on the onClick of the each specific button I want to show the respective data on the rightt side and change the background color of the active button
could you show a screenshot of what you’re building? I think I understand but it would be easier to discuss a solution with some more context.
You can change the color of the buttons based on a condition, like a stored value. I would suggest storing the name of the button when it is clicked, and then base the color off that value.
So the Communication button’s onClick would be:
storeValue( selectedButton, 'Communication' )
Then set its color to:
{{ appsmith.store.selectedButton==='Communication' ? 'BLUE' : 'GREY' }}
Then do the same for the other buttons, and replace the button name.
You could also use this stored value to determine what questions are shown on the right.
1 Like
Hey! Thanks for this. But, I had one more question, how do I map over the Questions which are on the right side?
I mean I have the data passed down to the buttons. I tried using LIST widget to map over the set of questions with the radio group, but Appsmith is not allowing me to do so…
Is there any other way to map, such that the questions look as same as is in the above screeshot?
This is a samle data object
questions: [
{
question: "Does the employee regularly have conflict with others?",
response: "",
},
{
question:
"Does the employee exhibit the core people values of the organisation?",
response: "",
},
{
question:
"Is this employee someone that other staff will turn to for advice?",
response: "",
},
{
question: "Open Ended Question",
response: "",
},
{
question:
"Is this employee someone that other staff will turn to for advice?",
response: "",
},
],
Could you provide a little more background info on what you are trying to achieve please? What happens when the form is complete? Are you sending it to an API? Can you show more screenshots of the app, and explain how everything is connected?
Yes @GreenFlux ! I have a set of categories on which I’m mapping using List Widget, each category has different set of questions and on click of the each category I want to show the respective questions.
And yes I want to make a post API call after submitting the form.
Attaching the screenshots below:
Here, I’m trying to map over the questions data using the LIST WIDGET, but it’s not allowing me to drag the radiogroup and ratings widgets inside it.
Is there anyway to map the dynamic data
Thanks for the extra info and screenshots. It looks like your list widget KRACategories is connected to data where each row has a questions array. You can use the list’s selectedItem property to access the correct set of questions, and bind it to the list on the right.
So the binding for the list of questions on the right side would be KRACategories.selectedItem.questions. That should update the set of questions on the right, each time a different item is clicked on the left side.
But how to I drag the RadioGroup and Rating Widget inside List widget?
Appsmith is not allowing me to do so!
Hey! We don’t currently support user inputs inside of list items. If you scroll down a bit here you will see an info panel explaining this. To quote the panel:
In the beta version of the List widget, you can only use widgets to display the data like images, text, and more. However, the widgets that need users to provide inputs like text box, checkbox, and more, are not available in beta but will be added as part of future releases.