Step 3 - Apply WorkWithPlus for Native Mobile to transactions - Native Mobile 15

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.

WorkWithPlusforNativeMobile15TrainingChangeCategoryBC

Creating our Panels

Now create a panel for each transaction:

WorkWithPlusforNativeMobile15TrainingPanelsCreate

Open ProductPanel, switch to the Patterns tab and the template selector will automatically open. Choose 'Horizontal List With Multiple Layout'.

WorkWithPlusforNativeMobile15TrainingSelectDesignForPanel

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.

WorkWithPlusforNativeMobile15TrainingSelectDesignForPanelBC

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

WorkWithPlusforNativeMobile15TrainingSelectAttributes

To finish, press the 'Apply' button.

This will create the objects needed to insert, update, delete, list, and display data in several separate panels.

WorkWithPlusforNativeMobile15TrainingInstanceCreated

 

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

WorkWithPlusforNativeMobileSelectingTemplate


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.

 WorkWithPlusforNativeMobile15TrainingIncludeInSlide

For each panel, we will also set the properties:

  • Description
  • Title
  • Menu icon type
  • Font icon Unicode

WorkWithPlusforNativeMobile15TrainingPanelProperties
 

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.

WorkWithPlusforNativeMobileExampleGIF