Apex Designer Documentation
What's New
Getting Started
Projects
Business Objects
Processes
User Interfaces
App Behaviors
Files
Dependencies
Project Settings
Libraries
Patterns and Best Practices
App Showcase

Create a Suppliers Page

Create a custom page to manage a list of objects.

Blank Profile Image
Written by David Knapp
Updated 5 months ago
3 min read

This lesson continues development of the Supplier Management app that you created in the prior lessons. You will create a custom Suppliers page that presents the suppliers in a table and includes a search bar.

Create the Suppliers Page

  1. Click User Interfaces on the ribbon laptop
    Notice that there are no Pages or Components in your project. Up to this point, your app has run entirely with Dynamic Pages which are generated on the fly based on the information model. 
  2. Type "su" in the "Add a page..." field:
    Add a page
    Apex Designer presents three options in the autocomplete. "Suppliers" will create a page for displaying a list of Supplier business objects. "Supplier" will create a page for displaying a single Supplier business object. "Su" will create an empty page.
  3. Press enter to create the Suppliers page:
    Suppliers Page

Add Elements to the Page

  1. Add the first element using drag and drop. Drag Breadcrumb from the palette onto the Template:
    Add Breadcrumb
  2. Add the second element with autocomplete. Enter "table" in the "Add element after Breadcrumb field:
    Add table
    Apex Designer shows components that match the string that you have entered. Click "Table (Apex Dynamic Components)" and the element is added to the template.
  3. The Table component has an "array" input. Key "su":
    Add suppliers to the table
    Press enter to select "suppliers".
  4. Add an "Add Button" after the table and set the array to suppliers:
    Add "Add Button" for suppliers

Generate the Page and Try it Out

  1. Click the Generate icon button at the top of the page:
    Generate icon button
    The Generate App icon button in the toolbar generates the whole app. The Generate icon button at the top of the page generates just this user interface and is faster on large apps.
  2. When the build is complete, launch your app to see the new Suppliers page:
    Suppliers page
  3. Click the supplier name or code to navigate to the Supplier dynamic page:
    Supplier dynamic page
  4. Click "Suppliers" in the breadcrumb to navigate back to your custom page.
  5. Create a few more suppliers using the add button:
    Suppliers list

Change the Column Order and Sort Order

  1. Click the blue header bar on Breadcrumb and Add Button to hide their details so that we can focus on the table:
    Suppliers Table element
    By default, the Table dynamic component presents the columns in the order of the properties on the Supplier business object. You can override that by adding an attribute.
  2. Type "pa" in the "Add attribute field of Table:
    Add attribute to Table element
    Press the down arrow once to select "pathsCsv" and press enter to add the attribute.
  3. Enter "code, name" in the pathsCsv attribute:
    Add pathsCsv attribute to suppliers table
  4. Click the Generate icon button and see that the column order is reversed:
    Suppliers list
  5. Click the "suppliers" property on the top left to open the suppliers property dialog:
    Suppliers property dialog
    The property is an array of Supplier objects. It is set to Read Automatically on page load and Save Automatically when an item is added.
  6. Key "o" in the "Add a configuration item..." field and press enter to add Order:
    Add a configuration item
  7. Click the "Select an order..." field and click "code".
  8. Generate the page and see that the suppliers are ordered by code:
    Suppliers page with sorted list

Add a Search Bar

  1. Add a Search Bar after the Breadcrumb:
    Add a Search Bar
  2. Generate the page and try it out:
    Search Bar in Suppliers page

Summary

You created a custom Suppliers page that works alongside the dynamically generated pages. You added elements to the template and mapped inputs to the elements. You changed the configuration of elements using attributes, and you changed the sort order of data retrieved from the server. Click the Next Topic link below to start the next lesson.

Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2022 Apex Process Consultants