101
Views
18
Comments
Solved
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.

Rank: #120
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

Rank: #193

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

Rank: #136

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

mvp_badge
MVP
Rank: #128

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



Rank: #136

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.

DemoHighlights.oml

Rank: #89
Rank: #120

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

Rank: #120

Hi Laurence,

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


Kind regards,

Rui Barradas