Once the design is imported, we'll create panels to have Product, Category, Person, and Branch listings.
By default, the Branch, Product and Person transactions were imported with the transaction property Business Component = True, but it remains to be changed for Category. This is so, because when creating the design for a transaction, the insertion, update and deletion of data is done through the Business Component.
Now create a panel for each transaction:
Open ProductPanel, switch to the Patterns tab and the template selector will automatically open. Choose 'Horizontal List With Multiple Layout'.
The Template Initialization will open, in which you will have to choose 'Based on a Transaction', this property requires that the transaction be based on the Business Component, hence the importance of doing it previously.
After basing the panel on the transaction, the template editor will open, where you will need to mark the checkboxes, and change the variables for the attributes indicated below:
Product:
- Generate 'Data entry' Panel: Checked.
- Generate 'Data display' Panel: Checked.
- Generate Prompt Panel: Checked.
- Image: Attribute: ProductPhoto
- Title: Attribute: ProductName
- Description: Attribute: ProductPrice
- Subtitle: Attribute: CategoryName
To finish, press the 'Apply' button.
This will create the objects needed to insert, update, delete, list, and display data in several separate panels.
Now, repeat the process for the Category, Person, and Branch transactions.
Category:
Tamplate to select: Titles template
- Title: Attribute: CategoryName
Person:
Tamplate to select: Titles and Images template
- Image: PersonPhoto
- Title: PersonFullName
- Subtitle: PersonHobby
Branch:
Tamplate to select: Locations List template
- Image: BranchPhoto
- Title: BranchName
- Address: BranchAddress
Let's add the panels to the menu:
We need to include the screens created in a menu with Slide navigation. To achieve this, we have the “Include in slide menu” property. Apply this property for each panel.
For each panel, we will also set the properties:
- Description
- Title
- Menu icon type
- Font icon Unicode
Product:
Description and Title: Products.
Menu icon type: FontAwesome
Font icon Unicode: f07a
Category:
Description and Title: Categories.
Menu icon type: FontAwesome
Font icon Unicode: f290
Branch:
Description and Title: People.
Menu icon type: FontAwesome
Font icon Unicode: f54e
Person:
Description and Title: People.
Menu icon type: FontAwesome
Font icon Unicode: f0c0
If you want other icons or you want to see the icons by code, you can look for them on the fontawesome website: https://fontawesome.com/v5/cheatsheet
Runtime example
Apply this property in other screens and run the App.
|