If you’ve not already done so, make sure you read the Prototyping Data tutorial before continuing on here.
Now that you know the basics of data in Justinmind, let’s learn about some additional functions you can use with your Data Lists and Data Grids.
In this exercise, we’ll learn how to create a ‘live’ simulated search filter using “On Key Up” + “Set Value” events.
We’ll continue prototyping from where we left off in the last tutorial. Open your prototype that contains the ‘Clients’ data master and the two dashboards.
- Go to the ‘Card Dashboard’ screen and drag an Input Text Field onto the Canvas above the Data Grid.
- With the Input Text Field selected, create an “On Key Up” + “Set Value” event, selecting the Data Grid as the target of the action. Leave the ‘Any Key’ input as default. For the value, click the ‘Calculated’ radio button and then the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.
- In the builder, follow these steps to create the expression:
1. Drag the ‘Filter’ function to the open space in the expression.
2. Still in the builder, click to the ‘Data masters’ tab and drag the entire Data Master to the open space to the right of the ‘Filter’ function in the expression.
3. Drag the Input Text Field to the last open space in the expression.
- Repeat steps 1-5 for the ‘List Dashboard’ screen.
Here’s how the filter works:
- The first space defines the information where the filter will draw from. We’ve dragged the Data Master to this space, so the filter will draw from all records in the Data Master.
- The second space defines the condition of the filter. We’ve dragged the Input Text Field where we type in our search, so the filter will check to see if the values typed in the Input Text Field match any values in our Data Master, and if so, will return those results.
Note that we’re using the Data Master in the filter rather than the Data List. Using the Data List instead would be useful for a multi-criteria search because that kind of search relies on filtering an increasingly narrow set of results.
In this exercise, we’ll learn how to sort columns of a Data List from largest to smallest. This would also work for a Data Grid, but we’re only adding this to the Data List in this case.
- In the same prototype, navigate to the ‘List Dashboard’ screen. Recall that in the last tutorial, we decided not to include the ‘Income’ field in this Data List. For this example, we’re going to place it back in, and use it to sort the data by income. Right-click on the ‘ClientList’ (Data List) and select ‘New Column’.
Hover over the column and you’ll see a white ‘arrow’ icon appear. Click and drag the column to the left, so it’s next to the ‘Managed by’ column.
Copy the ‘Managed By’ text header and paste it into the new column header, renaming it ‘Income’.
Copy the ‘[Clients.Managedby:]’ field in Current_Row_1, and paste it into the new column cell. In the Properties palette, look to the ‘Data Field’ dropdown, and change it to [Clients.Income]. Now, this field will display the data from the ‘Income’ field in our Data Master.
Additionally, place a text element next to [Clients.Income] and label it ‘$’.
- Drag two ‘arrow’ icons into the header next to ‘Income’. We’ll use these to sort the data from highest to lowest income. Ours are from the ‘Web Components’ widget library, but any kind of icon will work.
- Click on the ‘up’ icon and create an “On Click” + “Set Value” event, selecting the Data List as the target of the action. For the value, click the ‘Calculated’ radio button and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.
- In the builder, drag the ‘Sort’ function to the open space in the expression, changing the sort direction to ‘descendant’. Drag the Data Master to the first open space on the left. Drag the ‘Income’ attribute to the space on the right.
Like the Search filter, the Sort function has a similar structure – the first space defines what we’re going to sort, and the second space defines what parameters we’ll sort by. In this case, we’re sorting by the Income numbers.
- Repeat steps 3 and 4 for the ‘down’ icon, remembering to change the sort direction to ‘ascendent’.
In our last exercise, we’ll learn how to paginate the Data Grid and Data List in our prototype.
- Still on the List Dashboard screen, select the Data List. Look to the Properties palette and change the number of Rows per page to 10.
- Drag an Index widget from the Dynamic Content section of the widgets palette to the Canvas below the Data List. In the Properties palette, choose ‘Client List’ from the ‘Data Grid’ dropdown. We’ll use this element to show what page of the Data List records we’re on.
- Place two ‘arrow’ icons next to the Index element. We’ll use these to switch between the pages in the Data List.
- Select the right facing arrow and create an “On Click” + “Paginate Data Grid” event, selecting the Data List as the target of the action. For the pagination, select ‘Next Page’.
- Select the left facing arrow and create an “On Click” + “Paginate Data Grid” event, selecting the Data List as the target of the action. For the pagination, select ‘Previous Page’.
- Repeat these steps on the Card Dashboard screen.