How to create an input field that will accept multiple value ?

Hi everyone,

I'm a newbie in outsystems. I am currently working on a cms, and i would like to achieve a certain function but i didn't know how to do it here in outsystems. 

So here's the scenario:

I wanted to have an input field that would accept multiple values, save it to database and display its content as  a list. I like to do it like to accept a multiple value, the user could use a "/" to separate each content/value.

something like this:


This is how i wanted to display it:

  • value1
  • value2
  • value3
  • value4

Some might wonder why not use separate input field for each value, the reason is for that certain page, there will be alot of list to display, therefore if i assigned an input for each value that will be alot and i guess it will not be an ideal one.

Is this even possible here in outsystems? Badly needed help. 

I hope someone could help me. Any help would be appreciated.

Thank you so much.

Solution

Hello Laurence,

You can have your input value to be a text (string).

Then the user will insert a string like "Value1/Value2/Value3/Value4".

After this, you can use the String_Split function from the Text API and choose the value "/" as a delimiter.

This action returns a list of strings that results from splitting the original text and it allows you to break your string into different values:

  • Position 0 - "Value1"
  • Position 1 - "Value2"
  • Position 3 - "Value3"
  • Position 4 - "Value4"


After this, you can just save the different values returned from the splitting in the database and list them as you pretend.


Let me know if you have any further questions.


Kind regards,

Rui Barradas

Solution

Hi Laurence, you can also do this with Javascript function split(), using "/" as a delimiter, this will transform the text into an array, the example bellow

eg:

<script>
    var names = 'Harry,John,Clark,Peter,Rohn,Alice';
    var nameArr = names.split(',');
    console.log(nameArr);
     
    // Accessing individual values
    document.write(nameArr[0] + "<br>"); // Prints: Harry
    document.write(nameArr[1] + "<br>"); // Prints: John
    document.write(nameArr[nameArr.length - 1] + "<br>"); // Prints: Alice
     
    var str = 'Hello World!';
    var chars = str.split('');
    console.log();
     
    // Accessing individual values
    document.write(chars[0] + "<br>"); // Prints: H
    document.write(chars[1] + "<br>"); // Prints: e
    document.write(chars[chars.length - 1]); // Prints: !
    </script>

Best regards

Carlos Lessa

Rui Barradas wrote:

Hello Laurence,

You can have your input value to be a text (string).

Then the user will insert a string like "Value1/Value2/Value3/Value4".

After this, you can use the String_Split function from the Text API and choose the value "/" as a delimiter.

This action returns a list of strings that results from splitting the original text and it allows you to break your string into different values:

  • Position 0 - "Value1"
  • Position 1 - "Value2"
  • Position 3 - "Value3"
  • Position 4 - "Value4"


After this, you can just save the different values returned from the splitting in the database and list them as you pretend.


Let me know if you have any further questions.


Kind regards,

Rui Barradas

Hi Rui,

   Thanks for the quick response, i'll definitely look into this suggestion, however i just wanted to clarify regarding the saving process into the database, i will be saving it in just one field, all the split values. Is that okay? or will there be any complications when retrieving the value? 


Thank you very much!

- Laurence De Ocampo


Carlos Lessa wrote:

Hi Laurence, you can also do this with Javascript function split(), using "/" as a delimiter, this will transform the text into an array, the example bellow

eg:

<script>
    var names = 'Harry,John,Clark,Peter,Rohn,Alice';
    var nameArr = names.split(',');
    console.log(nameArr);
     
    // Accessing individual values
    document.write(nameArr[0] + "<br>"); // Prints: Harry
    document.write(nameArr[1] + "<br>"); // Prints: John
    document.write(nameArr[nameArr.length - 1] + "<br>"); // Prints: Alice
     
    var str = 'Hello World!';
    var chars = str.split('');
    console.log();
     
    // Accessing individual values
    document.write(chars[0] + "<br>"); // Prints: H
    document.write(chars[1] + "<br>"); // Prints: e
    document.write(chars[chars.length - 1]); // Prints: !
    </script>

Best regards

Carlos Lessa

Hello Carlos,

   I will also try your suggestion. Will let you know if this solve my problem.


Thank you!

- Laurence De Ocampo


Hi Laurence,

can you maybe say a bit more of what these values represent, and what the screen(s) will look like.  Will user be able to enter on one very full screen (where you want some sort of condensed entry field to save space, if I understand correctly) and then these values will appear in other places in the shape of some sort of list, right ?


So, for starters, it these are separate things, you should probably model them as such in your datamodel.  The design problems of any given screen really should not dictate how you model your data.

Also, it will probably not be the best user experience for them to have to remember that they need to type a "|" sign in some text field to create separate values.  If in the mind of your business / users these are separate things, then you should probably present them as such to your users.


So if you show a bit more of what your design is, I'm sure people in the community will be able to come up with better UI patterns, that take up little screen space.  Also, a screen with too much going on could be a sign of bad design, is it really necessary to have all that stuff on one screen.

Kind Regards,

Dorine

laurence De Ocampo wrote:

Hi Rui,

Thanks for the quick response, i'll definitely look into this suggestion, however i just wanted to clarify regarding the saving process into the database, i will be saving it in just one field, all the split values. Is that okay? or will there be any complications when retrieving the value? 


Thank you very much!

- Laurence De Ocampo

Hi again Laurence,

Regarding to your question, there is no problem at all if you want to save the value in a single field into the database. Since you are obtaining this value from a single input, you can just save that value directly in the database after the user's insertion. After that, you can retrieve this value from the database and use the String_Split function in order to display its content as a list like you pretend.


Kind regards,

Rui Barradas

Dorine Boudry wrote:

Hi Laurence,

can you maybe say a bit more of what these values represent, and what the screen(s) will look like.  Will user be able to enter on one very full screen (where you want some sort of condensed entry field to save space, if I understand correctly) and then these values will appear in other places in the shape of some sort of list, right ?


So, for starters, it these are separate things, you should probably model them as such in your datamodel.  The design problems of any given screen really should not dictate how you model your data.

Also, it will probably not be the best user experience for them to have to remember that they need to type a "|" sign in some text field to create separate values.  If in the mind of your business / users these are separate things, then you should probably present them as such to your users.


So if you show a bit more of what your design is, I'm sure people in the community will be able to come up with better UI patterns, that take up little screen space.  Also, a screen with too much going on could be a sign of bad design, is it really necessary to have all that stuff on one screen.

Kind Regards,

Dorine

Hi Dorine,

     Thank you for the reply, i understand what you're pointing, what i really need to achieve is something like this,.

HIGHLIGHTS

- VALUE 1

-VALUE 2

- VALUE 3

Imagine atleast having 3 of that same format in a page, it is necessary to be displayed like that because it contains vital information to the user.

That is why, i didn't want each value for each list to be inputted in separate input field because as you've said it will be a bad design. I agree with you regarding the need to input a "/" in order to classify it as different value. Can you suggest a different way to achieve it? Other than the way Rui Barradas suggest it? let me know so i could try it.

I'm sorry i didn't have the interface to show you right now, but basically that's what i wanted to achieve.


Thank you!

-Laurence




Rui Barradas wrote:

laurence De Ocampo wrote:

Hi Rui,

Thanks for the quick response, i'll definitely look into this suggestion, however i just wanted to clarify regarding the saving process into the database, i will be saving it in just one field, all the split values. Is that okay? or will there be any complications when retrieving the value? 


Thank you very much!

- Laurence De Ocampo

Hi again Laurence,

Regarding to your question, there is no problem at all if you want to save the value in a single field into the database. Since you are obtaining this value from a single input, you can just save that value directly in the database after the user's insertion. After that, you can retrieve this value from the database and use the String_Split function in order to display its content as a list like you pretend.


Kind regards,

Rui Barradas

Hi Rui,

  I see, i get it now. I'll try this and let you know if this solve my needs.

Once again, thank you!

-Laurence


Hi,


I just want to add that don't save in single column.would help you lot if you save one by one in record in entity.


Firstly if you have lots of data then split will cause a performance issue even data size.


thanks



Hi laurence,

Ok, so what I understand from your posts, is that a number of highlights are shown to the user, and to make sure each highlight get's the proper attention, each highlight is shown separately, i.e. in some sort of list.

Some other user on some other screen (let's call him the 'highlight administrator') has to enter these highlights into the system, and he doesn't have a lot of space on that screen ???

I'd like to first say, this doesn't seem like a very outlandish use case, the obvious design would be to have some sort of highlights adminstration screen, with a list of highlights and the ability to add or update highlights with a detail screen.  This is the type of screen that also gets created with scaffolding.  Have you considered to do it that way ?  Is there a reason why that is not an option for you ?

That being said, if you still feel like it should take up as little space as possible, see attached oml for inspiration.  Example screen 1 is intricate and has everything happening on roughly the same space as a single input field, Example screen 2 is much easier and quicker to build, just linking to the scaffolded screens, and I would choose that one as a beginner.

Have fun exploring OS,

Dorine


EDIT : just tought of it, an intermediate option between two above, could be to make use of a popup.

Dorine Boudry wrote:

Hi laurence,

Ok, so what I understand from your posts, is that a number of highlights are shown to the user, and to make sure each highlight get's the proper attention, each highlight is shown separately, i.e. in some sort of list.

Some other user on some other screen (let's call him the 'highlight administrator') has to enter these highlights into the system, and he doesn't have a lot of space on that screen ???

I'd like to first say, this doesn't seem like a very outlandish use case, the obvious design would be to have some sort of highlights adminstration screen, with a list of highlights and the ability to add or update highlights with a detail screen.  This is the type of screen that also gets created with scaffolding.  Have you considered to do it that way ?  Is there a reason why that is not an option for you ?

That being said, if you still feel like it should take up as little space as possible, see attached oml for inspiration.  Example screen 1 is intricate and has everything happening on roughly the same space as a single input field, Example screen 2 is much easier and quicker to build, just linking to the scaffolded screens, and I would choose that one as a beginner.

Have fun exploring OS,

Dorine


EDIT : just tought of it, an intermediate option between two above, could be to make use of a popup.

Hi Dorine,

     Thank you very much for your time and effort in replying to my post and helping me, i will thoroughly look into this and consider doing what you've suggested.


Thank You! I really appreciate the help.


- Laurence


laurence De Ocampo wrote:

Rui Barradas wrote:

laurence De Ocampo wrote:

Hi Rui,

Thanks for the quick response, i'll definitely look into this suggestion, however i just wanted to clarify regarding the saving process into the database, i will be saving it in just one field, all the split values. Is that okay? or will there be any complications when retrieving the value? 


Thank you very much!

- Laurence De Ocampo

Hi again Laurence,

Regarding to your question, there is no problem at all if you want to save the value in a single field into the database. Since you are obtaining this value from a single input, you can just save that value directly in the database after the user's insertion. After that, you can retrieve this value from the database and use the String_Split function in order to display its content as a list like you pretend.


Kind regards,

Rui Barradas

Hi Rui,

  I see, i get it now. I'll try this and let you know if this solve my needs.

Once again, thank you!

-Laurence


Hi Rui,

I am only getting one record, i cannot display all the records as split value, it only return one record value. I am retrieving the value of the Tour Highlights field, here's how it looks:


I am only getting the last value. How could i be able to get all the value of the record and display it as split? I've read some post, that it is need to be done in logic, how can i do that? i'm sorry i'm not that familiar with outsystems yet. 

Thank You.

-Laurence

laurence De Ocampo wrote:

Hi Rui,

I am only getting one record, i cannot display all the records as split value, it only return one record value. I am retrieving the value of the Tour Highlights field, here's how it looks:

I am only getting the last value. How could i be able to get all the value of the record and display it as split? I've read some post, that it is need to be done in logic, how can i do that? i'm sorry i'm not that familiar with outsystems yet. 

Thank You.

-Laurence

Hello Laurence,

The Sprint_Split function returns a list of values. Most likely, you are just accessing the current record of the list, which is the last value. That's why you're getting only the last value.

In order to access all the values, you can execute a For Each cycle for example. This will allow you to iterate the Sprint_Split returning list and do the logic to iterate those values. You can check some documentation in here.


Kind regards,

Rui Barradas

Hi,

@Rahul, I didn't see that related thread. Thank you for bringing it up.

@Laurence, I can see that you've followed the String_Split suggestion :) and Rahul helped you implementing the splitting with success. I hope that both topics are solved.


Let us know if you have any additional questions.


Kind regards,

Rui Barradas

Rui Barradas wrote:

Hi,

@Rahul, I didn't see that related thread. Thank you for bringing it up.

@Laurence, I can see that you've followed the String_Split suggestion :) and Rahul helped you implementing the splitting with success. I hope that both topics are solved.


Let us know if you have any additional questions.


Kind regards,

Rui Barradas

Hi Rui,

Yes my problem is solved! thanks to you and @Rahul. Thank you very much.


- Laurence


Rahul Sahu wrote:

Hi Laurence,


Hope your problem is solved.

https://www.outsystems.com/forums/discussion/62021/string-split-display-each-record-in-the-database-as-split-value/


Regards

Rahul Sahu


Hi Rahul,

It is already solved! thanks for the help!


-Laurence

Hi Laurence,

Those are great news! We're glad that we could help.


Kind regards,

Rui Barradas