Hello there,
Note that I am a newbie to Outsystems and have gone through "reactive web developer" path.
Here is the question.
I have a json structure for the survey kind of a functionality that I am working on. Here is how json looks like.
{ "Category": [ { "Name": "Team A", "Questions": [ { "Title": "How often do you work on X?", "QuestionType": "Radio", "Options": [ { "Text": "Once in every 2 weeks", "Weightage": "5", "IsSelected": false }, { "Text": "Once in every month", "Weightage": "4", "IsSelected": false }, { "Text": "Once in every 2 - 3 months", "Weightage": "3", "IsSelected": false } ] }, { "Title": "Which of the following do you do everyday (tick all that apply)?", "QuestionType": "CheckBox", "Options": [ { "Text": "Run", "Weightage": "2", "IsSelected": false }, { "Text": "Lift weights", "Weightage": "1", "IsSelected": false }, { "Text": "None", "Weightage": "0", "IsSelected": false } ] } ] }, { "Name": "Team B", "Questions": [ { "Title": "How often do you work on Z app?", "QuestionType": "Radio", "Options": [ { "Text": "Once in every 2 weeks", "Weightage": "5", "IsSelected": false }, { "Text": "Once in every month", "Weightage": "4", "IsSelected": false }, { "Text": "Once in every 2 - 3 months", "Weightage": "3", "IsSelected": false } ] }, { "Title": "Which of the following do you do everyday (tick all that apply)?", "QuestionType": "CheckBox", "Options": [ { "Text": "Ask questions on formums", "Weightage": "2", "IsSelected": false }, { "Text": "Answer questions", "Weightage": "1", "IsSelected": false }, { "Text": "None", "Weightage": "0", "IsSelected": false } ] } ] } ]}
I am considering creating blocks whereby there will be a
1) Dynamic radio button block (one which can generate N number of radio buttons for a radio group)
2) Checkbox list
3) Category block containing a condition where it will either use radio button block or checkbox list block (depending on the value of "QuestionType" attribute in the json)
I have tried this a bit but I dont know how the values such as item checked can be persisted to the object (deserialized from json to a local variable) that is backing the block. To add complexity, there is a tab control that I have added with 1 tab for Team A questions and another for Team B. i.e. questions for Team A wont show on Team B tab and vice versa.
If I select a radio button on 1st tab and come to tab 1 after switching to tab 2, the radio selection disappears. I will try to share the oml tomorrow (if the above isnt helpful)
I want to know if the values can be persisted once the deserialized json is bound to the block which is then rendered. How to have the selection of checkbox/radio within blocks be persisted in the object that is bound all the way down..?
Is this the right approach?
Thank you for reading thus far.
Hi Kalpesh Shah,
I think your approach should be fine.
The first thing come to my mind, you need a structure for the questions, e.g.
In your Category block, use the OnInitialize event or DataAction (based on where you json data come from) to deserialize the json, and assign to a local variable which using the above structure data type), use the If widget to check the QuestionType and render the corresponding blocks.
In both your Checkbox list block and radio group block, create an event when the checkbox / radio onselected, and make it mandatory.
With the above idea, you should be able to handle the data come from the child block, and also deserialize the json to render the correct view for category.
Although it's not perfect, but still hope this could give you a better idea.
Cheers :)
@Kay Lun Thank you for your reply.
Here is a test oml file that I am using and here is what I think should work (but isnt working)
Here is what I do
1) I have a json variable "inputJson" which I deserialize to an object on "OnInitialize" and assign it to "questionnaireObj"
2) I am using a list to render question of the 1st category. List source is set to questionnaireObj.Category.Current.Questions
3) I am using a block for checked list box. The options property of which is bound to questionnaireObj.Category.Current.Questions.Current.Options and each item has Text and Checked set to Text, IsSelected attribute
What I see is that the 1st checkbox of 1st question shows as checked (on screen load), because that is how it is set in inputJson. After screen is loaded, the click of button shows that 1st checkbox of 1st question is checked.
BUT, on clicking of checking/unchecking any of the 1st checkbox - it doesnt reflect in the underlying object.
Does it not do 2 way binding? I mean - my checking/unchecking of checkboxes doesnt reflect in the underlying object? Is the object not shared (reference) because it is at screen level?
Thank you again :)
You're doing it right, and almost there.
For the state manage, you just need a little touch on it, when passing the state from child element to parent, you will need to use Event in OS, which is a bit different compare to the ref() feature in the latest React / Vue.
What missing in your demo:
The image below would show your an example, also I have uploaded the oml for your better idea, I bet you will know how it actually work, and shine bright in your future.
Hope this help :)
Cheers.
KL
Thank you @Kay Lun.
I wish there was way where the child element at 4th level could talk to parent directly. i.e. a change in answer checkbox could call the method at screen level or the top block and thereby avoid bubbling event from answer block -> question block - > category block -> screen just to let the screen know of change in user selection of radio/checkboxes.
I hope I am doing it right and dont know if there is a better/simpler way to handle this.
Hum, I guess what you mean is something like setState and getState, not sure in OS have something similar to that, but as far as I know, beside emitting the data one by one, there should be no option to deal with that.
You're doing it right ATM, I'm sure it's not perfect and will have another better implementation in the future.
Or maybe we could seek for an expert to see if there's another possible solution tho.
This is really a good question, I will keep following this until I have the best answer.
Thanks for bringing this here :)