Can you add a row to a datamaster table without leaving the page? (e.g. add row button at the bottom that adds a blank row that you save)

Phil Schroeder shared this question 5 years ago
Answered

Is there a way to add rows to your data table IN the table? Like an add button at the bottom of the table that makes a new empty row appear that you can fill in and then upon hitting save it refreshes and becomes a part of the data master. I know there's very basic add to datamaster options, but I want a more dynamic all in one screen option.

Comments (22)

photo
1

You can try to use a vertical layout and add a dynamic panel at the bottom of your data list. This dynamic panel will be the form with the inputs where the user fills the data of the new row. The dynamic panel could be hidden by default and be shown when the user click on the add button of the table.


Then you'll need to create an action to add the new row to the data master. To do this use the "Data Master Action ->New" action and then add a "Set value" action to refresh the data list.

photo
1

What do you mean by vertical layout exactly? I'm guessing you mean stack the elements so when I add a row the dynamic panel always shows up at the bottom of the table rows and not on top of them? Is there a way I should go about this exactly? I was already trying something similar with a dynamic panel but haven't been able to get it to push and always end up at the bottom of the table rows. Thanks.

photo
1

Is exactly what you guess. If you select a container (a dynamic panel, table cell or data grid cell) you will see the "Layout" options on the "Properties" panel.


dcad60b65886e1dfc038db16c4e3318b


Select the vertical layout, then add the data grid and the new dynamic panel (the one that will act as the form for the new row values) into it. This way the new dynamic panel will be always at the bottom of the data grid.

photo
1

Ah, excellent, thank you. Looks rather simple so should be successful but if not I'll let you know, thanks for the help!

photo
1

Great worked, thanks!

photo
1

Excellent, glad to hear that!

photo
1

Ok so quick update. After getting pretty much all of it working I have one small problem. I have the save icon sending all of the input fields to the datamaster as a new entry. But the problem I'm having is I also set it up as "Set Value" and then choose the datamaster is it adds that data to the datamaster. But then I have to manually refresh the table for it to show up. What do I need to do so that it adds the data to the datasheet and refreshes the table? Thanks.

photo
1

Here's a screenshot to show how I have things set up. Like I said the save icon on the add-row table has the datamaster New to customers, with all of the inputs mapped correctly. And then on click it sets value to the table, the datamaster, and also makes the row disappear.


The issue I've been having is I put Set Value to the datamaster it saves things correctly and upon hitting refresh in my browser I see the new value added, but if I have it set to set value to the table in the prototype it just refreshes and the table goes blank. Everything else works but for some reason my set value is messed up. Or maybe the New datamaster action. Thanks! 8618959038579fa52752da68913a102a

photo
1

In fact you only need two actions instead of three, the "New data master instance" action that adds the new data on the data master and the set value action on the table to refresh its contents.


The third action you are using to set the value on the data master is not necessary this is made by the "New datamaster instance" action. In fact a data master can't be the target of a "Set Value" action, so you should be setting the value on a variable with the same name of your data master("Customers").


However, your prototype should work well with the actions defined. I'm not able to find the problem by looking at your picture, if you don't mind you can send your prototype(".vp" file) to jim.support@justinmind.com so we can figure out what could be happening.

photo
1

Ok, just sent it. Thanks for your help. I thought it seemed set up right, so I was confused as to why it wasn't working too.

photo
1

After checking your prototype I found that the “Set value” action doesn’t have any value assigned, that’s why the table is emptied after the user clicks the button. You’ll need to set the “data master” as the value of the action. To do this modify the action following these three steps:


1.Click on calculated value


2.Activate the “Data Masters” tab on the data section.


3.Drag & drop the Customers data master to the expression that will be assigned as the value of the “Set value” action.


4.Click Ok to close the expression builder, and Ok again to modify the action.


6aa19c66308e9dfb6e7bc9148c2dd7b5

photo
1

Ah, I was really close. I knew it something tiny like that. I figured it out that I had to be updating the table and the datamaster...but wasn't sure how I needed to do both at the same time. Awesome, works great now, thanks guys!

photo
1

Something kind of related. I want to do this if adding or editing a row in the grid. But I want the Modify Datamaster to be conditional upon if any of the fields are "unvalidated". The validation is purely visual in the sense that it changes the cell if it doesn't match the expression. I would like it that you can't save that row until all fields match their expressions or are "validated". Any thoughts on how to go about that? I was thinking if there was even a way to add a 1 or 0 value to each field then the save button can just check to see if the sum is the total amount of fields or not. Or if there is an easier way I'd love to know. Basically if all fields are validated it executes the modify datamaster action if ELSE then it would do nothing and a notification above the grid would show up telling them why they can't modify the row. Thanks!

photo
1

If you don't want to write a very large expression that validates all the fields at the same time (it will be complicated to write it and hard to find which is the problem if the condition is not well constructed), you can try to validate each field separately and keep if it's validated correctly on a variable. Finally check if all the variables have the validation flag to allow the data master modification.


Your interactions should look something like this:


Interaction 1(validate field_1):


when (validation field 1 succesfull)


do set value on variable_1, value = true


else


do set value on variable_1, value = false


Interaction 2(validate field_2):


when (validation field 2 succesfull)


do set value on variable_2, value = true


else


do set value on variable_2, value = false


.....


Interaction n(validate field_n):


when (validation field_n succesfull)


do set value on variable_n, value = true


else


do set value on variable_n, value = false


Interaction (check all validations)


when ( variable_1==true && variable_2 == true && .... && variable_n==true)


do Modify Datamaster

photo
1

Great. I'll try that. I knew I could do it the long way was just wondering if there was a better/faster/easier way. Thanks.


Once again another follow up, after some testing there are some little bugs I'd like to work out. This should be reflected in the file you have. But the notifications that pop up when someone mouses in and out on the warning icons (acting like a hover but not quite) only appear on the first row. Any suggestions on how to get them to show up on every row? Is there a way I can make them included in the row cells but just not show up until clicked or once they show up they expand the row and it all goes to pot? There was a "where clicked" feature in iRise that allowed me to get this functionality. I thought about building a section that contains these notifications just like under the add row. But then I would think would affect the add row, or wouldn't it if the section is technically empty when nothing is being hovered upon?


Any suggestions would be much appreciated, thanks :)

photo
1

I know what you mean but if you try to build a new section under the rows, always it will be shown at the bottom of the table, ignoring the position of the row the user entered with the mouse.


I'm sorry, but currently an element or group of elements of a row can't be displayed out of the row bounds easily (I think that maybe could be build using a menu component but it will be too complicated).

photo
1

I came off this project for awhile and I've come back to it now and I have a few questions posted on things that aren't working. One of which was working and is really simple. Regardless I tried your above suggested solution with setting values to true or false based upon validation. But I must be doing it wrong because it actually changes the value of the field, it doesn't give some kind of background value to reference. Or maybe you thought I wanted the actual text changed in the field. I purely want to check that to make sure all fields are valid before letting the user save the row. Thanks.

photo
1

Something caught my attention earlier when reading how you recommend doing it above. You kept on talking about setting the value of a variable and not the field. So in order to keep it simple I created hidden checkboxes that are then monitored by the save button and if any are checked (meaning the fields are invalid) it creates the else event and gives a warning but if they are unchecked (meaning the fields are valid) it will go ahead and save the changes to the row. Sometimes I forget you can use hidden elements to kind of hack the solution. I think this is similar to what you were mentioning before but I wasn't sure what you wanted me to use to represent the variable and I figured a checkbox was as good as any since it only has two states of checked or unchecked (i.e. true and false). Thanks guys!

photo
1

Yes, is something similar to what I suggested. However if you use variables is isn't necesssary to create a visual element and hide it.


Basically what I mentioned previosly, is to use each variable as one of your checkboxes, in that case you only need to imagine that the variables will only have two possible values (true/false). The save button stores a text value on the variable depending if the field it's valid("true") or not("false").


If any of the variables have the "false" text as its value then it creates the else event and gives a warning, in other case the changes on the row are saved.


Anyway your solution is totally valid!

photo
1

Yeah, that's the part I couldn't figure out. Is there a tutorial somewhere on your site about how to use variables? I looked in conditions and I'm assuming you add an action to set value but I can't figure out how to make it so it's setting the value of a variable as opposed to some invisible object. I would like to know this for future use since I kind of did it the hodge podge way and would rather do it the right way. Thanks.

photo
1

Currently I can't find an updated tutorial explaining this, but it's quite simple.


To store a value on a variable just create a "set value" action, select the "variables" tab, select a variable and write a value or use an expression as the value. I imagine you didn't notice the variables tab to select a variable as the target of the set value event. You will see it better in the next screenshot:


7532c933cd05b8356aebe9fc5d8de2e2


To use the variable value into the expression that will check if all of them are setted to "false". Just change to the variables tab on the 'data' panel and drag the variables on the expression.


photo
1

Ah, yeah I missed that. Some of the little tabs here and there are hard to notice. Ill definitely keep that in mind next time around, thanks!