Template
ProductCatalog2
A sample of a product catalog
Industry:
n/a
The Product Catalog App is a simple app that shows images in a gallery mode. The app will be useful for field reps to give to potential buyers to keep track of available products and pricing. It shows one image per product, the manufacturer's name, product description, specs, and listed price. The app user can scroll through the image gallery or navigate through each product using the next and previous buttons.
The app shows the use of Settings to filter the data shown to the user. The Settings table has a single row that can be edited by the user. The values in this row are used in Slice definitions to modify the content shown to the user.
Loading...
Also see:
tablet mode & fullscreen mode
How we built this app
The primary data entities are Products and Agencies. Each Product belongs to an Agency. Also, there are Events at which each agency makes exhibitions.
The app shows two important design elements:
1) The use of inline data views. When you look at one specific Agency, you see inline within it all the products of that agency. When you look at any product, you can navigate back to its Agency. Also within each Agency, there is a list of Events. The presentation of each of these inline views is controlled by a "Ref" UX view.
2) The use of an extra filtering table to do structured filtering of data. In this case, the filter specifies an Agency and a maximum Product price. The MyProducts slice shows Products that match the filter criteria. In practice, we'd recommend that the Filter table be marked as "private" (i.e. not shared), so that each user has their individual copy of the filtering criteria. In order to set up the filter values, we use a Slideshow view of the Filter table (it has exactly one row in it). We also create a "Ref" Form view for that table, so that editing the Filter row brings up that form and we can customize the behavior of the form. Specifically, we indicate that the form should automatically save and after saving, it should open the view of the MyProducts slice
This is a preview of the data sets used in the app.
Data
This is a high-level model of both the data entities and the UI elements in the app.
Loading...