HTML rendering in Widget List Box 'option values'

HTML rendering in Widget List Box 'option values'

  


Hello,


I am using the widget 'List Box' and I am assigning the 'Source Record List' to a variable called 'ListItems'.

This variable 'ListItems' is List of a Structure called 'ListBoxItem'.

The Structure 'ListBoxItem' has the attributes 'value' (Type Integer), 'description' (Type Text) and 'select' (Type Boolean).


The variable 'ListItems' has 3 records:

(10, 'ITEM 1', False)

(13, 'ITEM 2', False)

(16, 'ITEM 3', False)



The rendered html for this widget is:

<select size="4" name="RichWidgets_wt1$block$wtMainContent$wtlstBox1" multiple="multiple" id="RichWidgets_wt1_block_wtMainContent_wtlstBox1" tabindex="1" class="ThemeGrid_Width4 ThemeGrid_MarginGutter" style="height: 200px">

   <option value="0">ITEM 1</option>

   <option value="1">ITEM 2</option>

   <option value="2">ITEM 3</option>

</select>


In this rendered html, I can see that the attribute 'value' of the element 'option' has the values 0, 1, 2.

I wanted that these values would be 10, 13 and 16 (which are the values of the attribute 'value' of the list that was binded with the widget 'List Box')


Is it that possible?


Thanks in advance,

Pedro Ribau

I'm not aware that you can insert your own values into the ListBox option values.  They are, by default a zero based number supplied by OutSystems.

I believe the correct practice is to run a Server Action looping over the ListBox looking for the Selected Option.  An expression, e.g. isSelected - default value of False, is usually added to the List data source.  In the For Each loop, once an isSelected is found (as true), any attribute from the source can be assigned to a local variable.

I'll post a sample oml if needed.

Thanks for the reply DavidK.

I have no problems looking for the Selected Option.

The question is inserting my own values into the ListBox option values. This is possible in .net when you use a ListBox.

For example, declaring:

  <asp:ListBox ID="lstBox1" runat="server" SelectionMode="Multiple">

    <asp:ListItem Text="Item 1" Value="10" />

    <asp:ListItem Text="Item 2" Value="13" />

  </asp:ListBox>


It renders this:

  <select name="lstBox1" id="lstBox1" size="4" multiple="multiple">

    <option value="10">Item 1</option>

    <option value="13">Item 2</option>

</select>


I need my own values in the ListBox option values, because I need the id's of the items to 'process' it, client side.

Hello Pedro,

There is no way to you to automatically define the option values of the list widget. The list widget is a system component and these values are automatically defined, as the widget itself was designed to have its selected values used server side, not client side.

You can try to change the values, using JavaScript, based on the Text, after the component is rendered by the page. Probably this will be tricky, and not very performatic, but it would work.

Another option is to you to create your own component "list", or by javascript, with code associated that is able to send things to Server if you need it. Also, lots of work and no certain it will have good results.

So, my question for you is: Why do you need to process the selected values "client" side?
What's your use case.

If we understand your requirements, we can probably find an alternative way of doing what you need.

Cheers,
Eduardo Jauch

Thanks a lot Eduardo.

I need to make a web block that will enable the user to select a set of items from another set of items.

For this, there are 2 list boxes and 2 buttons. One of the buttons moves the selected items from 'list box 1' to 'list box 2', and the other button the other way round.

(I am attaching an image of the web block).


I want that when the user clicks these 2 buttons there will be no server request: the items move from one list box to the other but only on the client side.

Only when the user submits the page, I am getting the items that are in both list boxes (I use two hidden input widgets that I populate every time the buttons are clicked).


The problem is that I need id's for the items: the indexes don't allow me to identify them.


Cheers.

Is this Web or Mobile?  I'm guessing Web.


Web.

Ok... thanks.  In case I don't need to cover this... do you know how to build Javascript functions in a Web Screen... and call those functions from buttons?


Yes, I do.

Thanks Davidk.


Just lost a bucket of info posted because the forum crapped out... so trying again.  One of the issues I see is getting the "values" you want to "update" into your ListBox1.  There are ways... but what's the best.

Here are the functions I added to my Web Screen Javascript property...

SyntaxEditor Code Snippet

function processListBox(ListBox1_Id, ListBox2_Id){
    
    var list = document.getElementById(ListBox1_Id);
    var list2 = document.getElementById(ListBox2_Id);
    
    for(var i = 0; i < list.options.length; ++i){
        if(list.options[i].selected == true){
            //alert(list.options[i].value + ' was selected');
            var lOpt = document.createElement('OPTION');
            list2.options.add(lOpt);
            lOpt.text = list.options[i].text;
            lOpt.value = list.options[i].value;                        
        }   
    }
}

function setListBoxValues(ListBox1_Id){

    //testing... changing the default OS values to 4 plus a number
    var list = document.getElementById(ListBox1_Id);
    for(var i = 0; i < list.options.length; ++i){
        list.options[i].value = "4" + i;
    }   
}

function addOptions(ListBox2_Id){

    //just for testing
    var list = document.getElementById(ListBox2_Id);
    var lOpt = document.createElement('OPTION');
    list.options.add(lOpt);
    lOpt.text = 'New Option 1';
    lOpt.value = '4444';
}

function removeAllOptions(ListBox2_Id){
 
    var list = document.getElementById(ListBox2_Id);
    list.options.length = 0; 
    
}


To change the Options in ListBox1, my Set ListBox Values button has this code in the Extended Properties onclick value...

SyntaxEditor Code Snippet

"setListBoxValues('" + ListBox1.Id + "');return false;"


If I need to clear a ListBox...

SyntaxEditor Code Snippet

"removeAllOptions('" + ListBox2.Id + "'); return false;"


Once I've updated my Option Values... and then selected a couple of rows... I can process those selected rows into ListBox2

SyntaxEditor Code Snippet

"processListBox('" + ListBox1.Id + "','" + ListBox2.Id + "'); return false;"


Are your Option Values static values?  Or are they coming from a database?

Solution

Hello Pedro,

I don't know if the list source is available to be managed by JavaScript, or if it is in the viewstate.

So, I would say that you have 3 options here.

1. In case there is the possibility to mess with the source through JavaScript, you can create code to change items from one list to another. 

2. In case the source is in the viewstate only, not easily manageable, you probably can have info sent, through JavaScript, to keep track of the IDs associated with each item of the list, by order.

3. Create your own component to do this

I think the last option is the best, because the option 1, if possible, will involve dealing with undocumented features of the platform, and this has huge disadvantages.

Option 2 is possible, but the code will become a mess...

Doing your own component, while not so straightforward as using a list box, will allow you to easily do what you want and will keep your code clean.

You can use as input for your component a list of a standard structure (id, label), and pass any list to it, doing the mapping. In the component, you create a list using JavaScript or an unescaped expression. And add the JavaScript to change items from one list to another (now with real IDs). 

Let me know if you wanna try this way and need any help. 

Cheers,

Eduardo Jauch

Solution

Davidk,

Thanks for your post but I have no doubts regarding setting and removing list boxes values.
My question was just if it was possible to automatically define the option values of the list widget.
The answer is no, so I guess I will have to create my own compnente to do that.

Davidk wrote:

Just lost a bucket of info posted because the forum crapped out... so trying again.  One of the issues I see is getting the "values" you want to "update" into your ListBox1.  There are ways... but what's the best.

Here are the functions I added to my Web Screen Javascript property...

SyntaxEditor Code Snippet

function processListBox(ListBox1_Id, ListBox2_Id){
    
    var list = document.getElementById(ListBox1_Id);
    var list2 = document.getElementById(ListBox2_Id);
    
    for(var i = 0; i < list.options.length; ++i){
        if(list.options[i].selected == true){
            //alert(list.options[i].value + ' was selected');
            var lOpt = document.createElement('OPTION');
            list2.options.add(lOpt);
            lOpt.text = list.options[i].text;
            lOpt.value = list.options[i].value;                        
        }   
    }
}

function setListBoxValues(ListBox1_Id){

    //testing... changing the default OS values to 4 plus a number
    var list = document.getElementById(ListBox1_Id);
    for(var i = 0; i < list.options.length; ++i){
        list.options[i].value = "4" + i;
    }   
}

function addOptions(ListBox2_Id){

    //just for testing
    var list = document.getElementById(ListBox2_Id);
    var lOpt = document.createElement('OPTION');
    list.options.add(lOpt);
    lOpt.text = 'New Option 1';
    lOpt.value = '4444';
}

function removeAllOptions(ListBox2_Id){
 
    var list = document.getElementById(ListBox2_Id);
    list.options.length = 0; 
    
}


To change the Options in ListBox1, my Set ListBox Values button has this code in the Extended Properties onclick value...

SyntaxEditor Code Snippet

"setListBoxValues('" + ListBox1.Id + "');return false;"


If I need to clear a ListBox...

SyntaxEditor Code Snippet

"removeAllOptions('" + ListBox2.Id + "'); return false;"


Once I've updated my Option Values... and then selected a couple of rows... I can process those selected rows into ListBox2

SyntaxEditor Code Snippet

"processListBox('" + ListBox1.Id + "','" + ListBox2.Id + "'); return false;"


Are your Option Values static values?  Or are they coming from a database?



Hello Eduardo,

I think I will take your advise and I go for creating my own component.

Thanks,
Pedro


Eduardo Jauch wrote:

Hello Pedro,

I don't know if the list source is available to be managed by JavaScript, or if it is in the viewstate.

So, I would say that you have 3 options here.

1. In case there is the possibility to mess with the source through JavaScript, you can create code to change items from one list to another. 

2. In case the source is in the viewstate only, not easily manageable, you probably can have info sent, through JavaScript, to keep track of the IDs associated with each item of the list, by order.

3. Create your own component to do this

I think the last option is the best, because the option 1, if possible, will involve dealing with undocumented features of the platform, and this has huge disadvantages.

Option 2 is possible, but the code will become a mess...

Doing your own component, while not so straightforward as using a list box, will allow you to easily do what you want and will keep your code clean.

You can use as input for your component a list of a standard structure (id, label), and pass any list to it, doing the mapping. In the component, you create a list using JavaScript or an unescaped expression. And add the JavaScript to change items from one list to another (now with real IDs). 

Let me know if you wanna try this way and need any help. 

Cheers,

Eduardo Jauch