Module 3 - The user interface

Step 4: Creating the necessary catalogs #

Catalogs are user interface elements that help manage related entities. In search views, they act as filters (e.g., finding products within a category), and in edit views, they allow users to select related entities by name instead of by key (e.g., choosing an author for a book). Catalogs can be of either fixed list or dynamic list type, depending on the user’s choise.

For this app, the required catalogs are for authors, categories, and customers. These catalogs help filter books by author, select categories, and choose customers when needed.

To create a catalog, follow the steps presented in Lesson 2 the Invoices.

Example: The authorList catalog #

In this example, the authorList catalog is created. Following the steps presented in Lesson 2 the Invoices, the Fetch tab, would have the following fetch query:

FETCH author (key, name AS value)

Now you can create the categoryList and customerList catalogs, in the same way.

For more information on catalogs check the Catalogs page from the Develop App module.

Step 5: Creating the views #

The search and edit views created for these entities in the library app will provide the users an interface to interact with data.

There are 2 types of views:

• Search views, that will give the user the ability to read the data. For more information on search views see Documentation → Develop App → Search views. We can add filters in it to find a specific information.

• Edit views, that will give the user the ability to create, update and delete data. For more information on edit views see Documentation → Develop App → Edit views.

1. Search view #

Firstly, we will create search view for each entity in the customization set, because the first action of an user is to read the data.

Follow the steps presented in Lesson 2 the Invoices to create the search views for the entities: “author”, “book”, “book_instance”, “category”, “book_history”, “book_history_type” and “customer”.

Example: Book search view #

Now we can use the authorList and categoryList catalogs in the bookSearch search view to filter the data. For adding the filters, select the Filters tab in the bookSearch, click the Add button for each row, and enter the following:

Select the Fetch tab and enter the following fetch query:

FETCH book(key GROUP BY, title, stock){
    author TO id_author(name AS authorName GROUP BY) FILTER AND (${authorArg}),
    book_category TO id_book LINK TYPE LEFT{
        category TO id_category LINK TYPE LEFT(CONCAT(name) AS categoryName) FILTER AND (${categoryArg})
    }
} FILTER AND (${titleArg})

Click the Execute button, located above the query, to test the query.

Select the Columns tab, click the Add button for each row, and enter the folowing:

Note: Rank represents the order in which the columns will be displayed in the search view.

Click the Save button.

2. Edit view #

Edit views represent a page that shows the user an interface with specific data for only one entity. It plays the role to show the fields that will be completed. For example, creating a book we will need a title and a list of authors to select from.

Follow the steps presented in Lesson 2 the Invoices to create the edit views for the entities: “author”, “book”, “book_instance”, “category”, “book_history”, “book_history_type” and “customer”.

Example: Book edit view #

As an example, we will create the book edit view (bookEditor). Select the Tabs tab, click the Add button, fill Title = Book, and click the navigate arrow in the Input tab field. Follow the rest of the steps presented in Lesson 2 the Invoices, and then add the following:

Click the Save button.

The book edit view (bookEditor) will have the following tabs:

Step 6: Connecting the edit view to the search view #

The search view and edit view need to be connected because they work together to ensure accessibility of data. Here’s a breakdown of why this connection is necessary in terms of business needs:

Search View: The search view allows users to quickly find and retrieve specific records, such as books, authors and customers information.

Edit View: Once the relevant record is located through a search, the edit view allows staff to make updates or corrections to that record, such as changing a book’s category or updating a customer’s contact details.

Click the Develop app, and then click on the Search views menu.

In the page that opens locate the search view with the title Books and name bookSearch, check it in and click the Edit button located above the list. In the page that opens, under the Search section, fill the following field with:

Edit view = bookEditor

Click the Save button.

Now, connect the rest of the search and edit views for the other entities.

Step 7: Creating the App #

Now that we have created the data model and the views we can use them to create the app. Using the data model, menus will be created for display in the interface. You should already be familiar with menu creation from Lesson 1 Products. You can review that section here.

For more details on menus, check Documentation → Develop App → Menus.

The menu items for the library app will be the following:

Now the user interface for the library app is created and you should be able to see it in the upper right corner of the screen.