This week in Internal, there’s a whole host of new features to help you improve the design of your tools, control table behavior, and bind to function outputs.

Layout Settings

Every component now has new settings, found under the Design tab, to control its position and size. 

Left and Top allow you to set the position of the component relative to the left and top edges of the Space. This can be set to a number of pixels or as a % of the Space. Left and Top options do not appear for in-line components or components within a flexbox. 

Width and Height allow you to control the size of the component, relative to its container. The container can be the Space itself, another component (for in-line components), or a flexbox (for components within a flexbox). This can be set  to a number of pixels or as a % of the container. 

Combining the size settings with visibility settings can allow you to create dynamic layouts. 

For example, you can have a flexbox that displays 2 forms when a checkbox is selected, and 3 forms if it’s not selected. To have the forms laid out evenly, you could set all 3 forms to be 50% width in the layout settings. 

Note: If using percentages and the percentages set add up to more than 100%, the layout will be set proportionally (based on each % over the total %). 

In this case, since each form is set to 50%, when all 3 are visible, each will take up 33% of the total width (50/150). However, if only 2 components were visible (using visibility settings), they would each take 50% of the total width. ‍

‍

Bind to SQL Function Output

Now, when you go to Field Configuration, you’ll see a new option for you to bind to functions in that Space. This option only appears for auto-generated functions from SQL databases (ie, “insert user record”), and the values come from the last execution result. 
‍

For example, I have a form that executes multiple functions, one that inserts a new company record and one that inserts a new user record. The new user function requires a company_id field, which is returned as the id field when the first function (inserting a new company record) executes. 
‍

I can configure the company_id field to be bound to the last execution result of the “insert company record” function, and bind it to the id value that’s returned. Now when I use this form, it’ll first create a new company record, then take the id created for that new company record and use it as the company_id when it executes the second function - “insert user record”. 

‍

Table Load Settings

Within Table configuration, you’ll now see new options in the Effects tab. These allow you to control which rows are preselected when the table first loads and upon subsequent reloads. This can be very useful if you have other components bound to the selected row(s) of a table -- for example, a detail component bound to a table selection. By having preselected rows upon load and reload, the detail component will always be populated. 

On Initial Load: You can choose to have the first row in the table pre-selected.

On Reload: You can choose to have the first row pre-selected or to maintain (multiple) row(s) upon reload. 

If you choose to maintain the rows by index, the preselected rows will be the ones in the same position as those that were selected before the table reloaded. For example, you previously had the first row and the third row selected - when the table reloads, the first and third row will remain selected (even if the underlying data in the rows is completely different). 

‍
If you choose to maintain the rows by id, the preselected rows will be the same records as what was selected previously, based on the unique id rather than the position. For example, if you previously had record id 634 and record id 722 selected, when the table reloads, those 2 record ids will remain selected, no matter what position those records are in now.