239
Views
15
Comments
Solved
How to achieve recursive nesting of web block. I have multiple levels of Questions.
Application Type
Reactive

Hi Have a web block where I am showing Questions & their answers, so Suppose I have a question

Question: Which device you have?

Answer: Tablet, Mobile, IPod, Ipad,...............

Now If user selects Mobile, then I want to show next level of Question for Mobile Under it. Example:

                Which brand Mobile you have?

                 Apple, Samsung, Sony.............


And so on,..... Suppose User clicks on Apple, then we ask further questions & answers...... This dynamic questions and answers can be added to any level from backend system. 

So I have designed a webblock which iterates over questions & then for each question shows answer, and if answer has further questions, then I need to again call same webblock to show associated questions & answers....... so on.

But Outsystems detects a loop when I invoke same webblock directly or indirectly within it at any level down, hence I want to check what way this can be achieved to display on UI. Just one thing to highlight this hierarchy can be upto any level, we don't have a max cap on that.


DB Design is attached:

Answer has Question as foreignKey which is mandatory & additional parameter hasfurtherquestion, if this is true then new question will be created and parentAnserId will be updated in Question.



Screenshot 2022-11-17 at 15.07.13.png
2019-04-13 08-16-46
Pawan Kumar Sharma
Solution

I think, this can be achieved using CSS by adding data in the existing list based on the condition and showing proper indentation. I will try that.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

yes,

i think that is the way to go.

try to make an aggregate or data action that returns a full list of questions, with 3 extra properties : applicability and level down and sequence (or get them sorted in the correct sequence).

I think you will probably need a data action rather than an aggregate to retreive this and rearrange result, or maybe have these features calculated and stored in your datamodel, so you can quickly query it.

You can then just show the full list, taking into account applicability to determine visibility and taking into acount level down to determine indentation.  

Dorine

2023-08-28 07-00-10
Paulo Torres
Champion

Hello,

You can't nested WebBlocks.

What you can do is based on List/query, and inside you have your WebBlock, will appears how many times you have rows.

2016-04-22 00-29-45
Nuno Reis
 
MVP

What Paulo said.

If your list is dynamically generated, it can get new questions related with previous answers.

And on that list you can have one block multiple times.

Similar to this answer i gave days ago:

https://www.outsystems.com/forums/discussion/83217/navigating-forms-in-react/#


2023-08-28 07-00-10
Paulo Torres
Champion

@Nuno Reis simple and efficient :)

2019-04-13 08-16-46
Pawan Kumar Sharma

So I have a QuestionAnswer WebBlock. If answer has further question, I need to again invoke same WebBlock, and so on...... So there is no definite number, how many down the layers I have to do this. I am still not sure how this can be achieved. Can you please help me with an example, by taking my simplest DB design from attachment, else a step wise description of what need to be done, will be helpful.

2023-08-28 07-00-10
Paulo Torres
Champion

But I believe you have this defined in your DataBase, in this case you need your WebBlock inside a List.

Main Question

 - Child Question

 - Child Question

 - Etc

2019-04-13 08-16-46
Pawan Kumar Sharma

@Paulo Torres : Yes I have same structure, and questionanswer web block inside the list(Iterated over Questions starting from root question), this web block contains question and answer, Now in that webblock for a particular answer if i have further question, i need to again populate questionanswer webblock, that's where the problem is .

2023-08-28 07-00-10
Paulo Torres
Champion

Do you want to share your oml and I can check and make something for you.

2019-04-13 08-16-46
Pawan Kumar Sharma

Sorry I can't share the oml due to internal application issue. however I made my requirement & design very clear through snapshot & description.

2016-04-22 00-29-45
Nuno Reis
 
MVP

Here goes a small example on how to add questions to the list.

You still need to remove questions after a previous answer is changed.


https://nunoreis.outsystemscloud.com/NestedQuestions/

NestedQuestions.oml
2019-04-13 08-16-46
Pawan Kumar Sharma

Once you select Mobile, then that related questionanswer block should just appear just below Mobile Question as inside container and similarly if i have next level of question on click of samsung, then related question answer block should appear inside that.

That is what getting difficult for us because we can achieve this any level of hierarchy through a webblock by including based on if answer has further question.

2016-04-22 00-29-45
Nuno Reis
 
MVP

So, a tree view of the questions?
For that I'd generate a JavaScript. OS dislikes nested blocks for a reason.

2019-04-13 08-16-46
Pawan Kumar Sharma

@Nuno Reis Can you share a sample oml with such JS?

2019-04-13 08-16-46
Pawan Kumar Sharma
Solution

I think, this can be achieved using CSS by adding data in the existing list based on the condition and showing proper indentation. I will try that.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

yes,

i think that is the way to go.

try to make an aggregate or data action that returns a full list of questions, with 3 extra properties : applicability and level down and sequence (or get them sorted in the correct sequence).

I think you will probably need a data action rather than an aggregate to retreive this and rearrange result, or maybe have these features calculated and stored in your datamodel, so you can quickly query it.

You can then just show the full list, taking into account applicability to determine visibility and taking into acount level down to determine indentation.  

Dorine

UserImage.jpg
Esraa Hamdi

hello did you reach a solution becouse i have the same issue 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.