How to build a dynamic WebBlock without JavaScript?

Hi Comunity...

 i have a page with a count input and a type input, and then i input the count and type,this page can add some different elements. For example,If the Value is (2,Button) apply the page or web block will add two buttons. How to implement this? 

Best regards 

Leon Liang

Hi Leon,

Can you explain what's your goal with this? It may help us give you better suggestions. For instance... you add those 2 buttons dynamically but... what are they going to do?

Thanks for reply,

Actually,i want to build a web receive data,the data is json type,like 

           {
                "action":"SetInput",
                "params":{
                    "name":"birthday",
                    "type":"birth",
                    "title":"birthday",
                    "required":true
                }
            },
            {
                "action":"SetInput",
                "params":{
                    "name":"fullname",
                    "type":"text",
                    "title":"fullname",
                    "placeholder":"?:Leon Liang"
                }
            }

and then the web will add elements with those json message.

Jorge Martins wrote:

Hi Leon,

Can you explain what's your goal with this? It may help us give you better suggestions. For instance... you add those 2 buttons dynamically but... what are they going to do?

those message is not from my server or web,it from watson.


Suhas Jamdade wrote:

Hello liang

You can create the list. Just pass the value to web block and append the list and use that list to view.

Thanks for reply,

if i create the list. Just pass the value to web block,can users alter data in this block?or  submit,and if it's a list,the web style can't hit the mark.


Solution

Leon,

Off the top of my head, and potentially missing relevant details, my suggestion is:

  • Define a Static Entity to represent the data type possibilities for your dynamic input fields
  • Define a structure (eg. InputDefinition) that represents one of those input fields.
    • You will probably need to define a ValueXXXX attribute of each possible data type to hold the value of the input field
    • name
    • data type identifier (so you know which widget to use and which ValueXXXX attribute will hold its value)
    • whether it is Mandatory or not
    • what to display in the prompt (placeholder in the JSON)
  • Define a Local Variable on your screen of type List of InputDefinition (eg. Inputs)
  • Add a List/Table Records and set your local variable as the Source Record List
    • for each element, check the data type and display the correct type of Input Widget, bound to the right ValueXXXX attribute of the element
  • Everytime you add a new dynamic input to the screen, you will need to:
    • fill in all the values of InputDefinition (except for the ValueXXXX);
    • add a new record of InputDefinition to your local variable Inputs
    • Ajax Refresh your List/Table Records.
  • When you submit the form you have your data in your Inputs list 


Solution

liang hualu wrote:

Suhas Jamdade wrote:

Hello liang

You can create the list. Just pass the value to web block and append the list and use that list to view.

Thanks for reply,

if i create the list. Just pass the value to web block,can users alter data in this block?or  submit,and if it's a list,the web style can't hit the mark.



Yes, user can alter the list data.

Jorge Martins wrote:

Leon,

Off the top of my head, and potentially missing relevant details, my suggestion is:

  • Define a Static Entity to represent the data type possibilities for your dynamic input fields
  • Define a structure (eg. InputDefinition) that represents one of those input fields.
    • You will probably need to define a ValueXXXX attribute of each possible data type to hold the value of the input field
    • name
    • data type identifier (so you know which widget to use and which ValueXXXX attribute will hold its value)
    • whether it is Mandatory or not
    • what to display in the prompt (placeholder in the JSON)
  • Define a Local Variable on your screen of type List of InputDefinition (eg. Inputs)
  • Add a List/Table Records and set your local variable as the Source Record List
    • for each element, check the data type and display the correct type of Input Widget, bound to the right ValueXXXX attribute of the element
  • Everytime you add a new dynamic input to the screen, you will need to:
    • fill in all the values of InputDefinition (except for the ValueXXXX);
    • add a new record of InputDefinition to your local variable Inputs
    • Ajax Refresh your List/Table Records.
  • When you submit the form you have your data in your Inputs list 


Thanks very much for your suggestions,

If i do those,is the List/Table Records  all input element  fanilly?if the type is button,select and soon on,it  con't use this way.


Suhas Jamdade wrote:

liang hualu wrote:

Suhas Jamdade wrote:

Hello liang

You can create the list. Just pass the value to web block and append the list and use that list to view.

Thanks for reply,

if i create the list. Just pass the value to web block,can users alter data in this block?or  submit,and if it's a list,the web style can't hit the mark.



Yes, user can alter the list data.

Thanks very much for reply,

the question now is "web style con't  get along with the list",i need more  web style support,like Button,Select and so on .


You can use this approach for all kinds of inputs, for instance, if you know it's a Date you can display an Input widget with an Input_Calendar bound to it, if it's a boolean you can use a checkbox for instance.

For things like a ListBox/Dropbox you'd need to be able to also provide the possible choices when creating them, the same if you want a set of Radio Buttons.

For Buttons it would be trickier because those need to have a behaviour, how would you tell your application what's the expected behaviour when you click on such a button?

Jorge Martins wrote:

You can use this approach for all kinds of inputs, for instance, if you know it's a Date you can display an Input widget with an Input_Calendar bound to it, if it's a boolean you can use a checkbox for instance.

For things like a ListBox/Dropbox you'd need to be able to also provide the possible choices when creating them, the same if you want a set of Radio Buttons.

For Buttons it would be trickier because those need to have a behaviour, how would you tell your application what's the expected behaviour when you click on such a button?

Thanks for your suggestions again,

i think outsystems dealing with this problem using the built-in model didn't live up to our expectations,we decide to use JavaScript?Thank you for your help,we are looking forward to the official model can solve perfectly.