Creating the Account List
Now that we have a working model with some data, it’s time to create our first two widgets. These will allow us to manage our data: list all the accounts in various ways and to add and/or update records. We’ll start with List Widget.
2. Launch Widget Builder. Click the Add Widget button which can be found in the Widgets sidebar to start the Widget Builder wizard. This tool can build any kind of widget for you quickly with it’s two easy steps.
Customizing List Appearance
At this point, your list widget looks nicely organized and is fully operational. It has informatively named columns and is page-able too, so it can handle large amount of records efficiently. Now we’re gonna have a look at how to change a few more attributes to make our list even better.
The Widget Designer is accesible after creating the widget and will open automatically. You can also open saved widget, by double clicking on it under Widgets in the left pane.
In the left pane of the Widget Designer you should see a live preview of your widget. All the changes you make will be immediately reflected here. As you can see, the columns of the list appear in a default order and their titles are identical to the names of the model fields. Let’s change this now:
6. Change column title, click on the name column title, which then gets transformed into a text box. Now type in Account and press enter. The column title will be changed instantly.
Automatic Filters and Sorting are already in place!
If you click to the i:fields element in Widget Inspector now, you’ll see that its remoteFilter and remoteSort properties are set to true. This means that the list is already sortable and search operations can be performed too! All List widgets generated by Studio have this ability by default: you can order or filter the results by any column.
Sorting by a column can be done by clicking the column title. This toggles ascending and descending modes.
Filtering by a column can be triggered by clicking the small arrow in column title then choosing Filters. Each column has filter that fits its database data type.:
Textual columns get a keyword search box
Numeric ones operate with ranges
Dates and Times get a date picker
Relations are filtered using live-search combo boxes.
It is possible to apply several filters at the same time and you may clear all active filters via More Actions -> Filters -> Clear current filter option.
Click to i:fields and select one of the columns to see what filter is applied to that column. This is controlled by the filter attribute. You may change its value, but in most cases you don’t have to, since Studio automatically sets up the best filter for you.
To turn of sorting or filters set the remoteSort or remoteFilter parameters of i:fields to false.
Once you’ve done all these, press the Save button, to save your changes to disk. You may hit the Preview button now to see your widget in action!
Congratulations! You have just created a fully functional and powerful List widget. By completing this small tutorial you’ve built a widget that is able to: list your data in a page-able manner, refresh data, sort or filter your data in various ways, hide/show columns, columns are resizable, and you can export the results as CSV. But it doesn’t stop here, you can also build a PDF report for printing. Not bad huh? -:)
In the next chapter we’ll complete our client management tool, by adding an equally powerful Edit view to it.