Tips

Cascade Input Controls

You can pipe results of one input control to another and use that in condition or filter. Lets assume you have to Pickers, one to let user pick from list of Catalog and another one to pick from list of inventory for selected Catalog. Lets see how to accomplish this using NextAppFast

Select Inventory Picker Field in Editor. In the Properties Panel, scroll and locate Filter property. Select Filter property and this will open Filter Editor dialog. Click Add Field Condition and enter following

When > Select Field > 'Catalog Id'
Select Criteria > Select > 'Equal to'
Enter Value: '${catalogId}'

When > Select Field > 'Catalog Id'
Select Criteria > Select > 'Equal to'
Enter Value: '${catalogId}'

Click Done. This will add filter catalogId = ${catalogId} to Inventory Picker Field. Now when retrieving list of inventory items, it will be filtered using selected catalogId.

Next find Edit Condition and Select it. This will open Edition Condition Editor. Click Add Field Condition and enter following:

When > Select Field > 'Catalog Id'
Select Criteria > Select > 'Exists'

When > Select Field > 'Catalog Id'
Select Criteria > Select > 'Exists'

Click Done. This will add edition condition catalogId Exists to Inventory Picker Field ensuring that user can select inventory only when Catalog has been provided.

Want to hide instead of making it read only? Just use Display Condition instead of Edit Condition!

Styling based on data

You can style fields based on item data. Lets assume you are showing users list of inventory and want to style 'status' column based on inventory status:

Available
Assigned

Available
Assigned

Select Status field in Table view. In the Properties Panel, scroll and locate Style section and expand it. Scroll to bottom and locate Conditional, enter following

function(item){
    let commonStyle = {
        borderRadius:'12px',
        height:'24px',
        display:'flex',
        justifyContent:'center',
    };
    switch(item.status){
        case 'Assigned':
            return {
                ...commonStyle,
                color:'gray',
                backgroundColor:'lightGray',
            }
        case 'Available':
            return {
                ...commonStyle,
                color:'green',
                backgroundColor:'lightGreen',
            }
        default:
            return {};
    }
}

function(item){
    let commonStyle = {
        borderRadius:'12px',
        height:'24px',
        display:'flex',
        justifyContent:'center',
    };
    switch(item.status){
        case 'Assigned':
            return {
                ...commonStyle,
                color:'gray',
                backgroundColor:'lightGray',
            }
        case 'Available':
            return {
                ...commonStyle,
                color:'green',
                backgroundColor:'lightGreen',
            }
        default:
            return {};
    }
}

This allows you to change style of a field based on status of inventory. Instead of function, you can also just provide custom styles:

{
    borderRadius:'12px',
    height:'24px',
    display:'flex',
    justifyContent:'center',
}

{
    borderRadius:'12px',
    height:'24px',
    display:'flex',
    justifyContent:'center',
}

Related List

When you are trying to show related list of items, just drag a list control like Table and drop it on an existing List control like Table. This will allow you to show related items for a selected parent item.

Inline List

When there is direct relationship between items, like parent, child, drop a list control (table, editable table) on to an existing Item details/Form View. This will allow you work create and work with item and children as a whole atomic unit. In db terms, they are treated like a Transactions, and in effect, if you look at model.server file for item, they indeed are in a transaction scope! It also makes for a nice user experience, being able to work on item/children on same screen.