Lesson 1 the Products
Designing an App in Kodall must take into account at least two perspectives, one is the business problem and the other is the technical problem.
This lesson makes no exception so here are the two:
As a business problem
This App implements the management of a list of products with capabilites for searching and editing.
As a technical problem
This App implements a data model, search views, edit views, menus.
Contents
Design the data model
The first step in designing a Kodall app is constructing the data model. The data model consists of entities, properties and relationships between entities.
For the purpose of this lesson we will create an app that manages a list of products. Each product must have a name, a price, and a bar_code.
Currently, the ER diagram will look like this:
We will create one entity:
- product
- with the properties:
- name of type: string
- price of type: decimal
- bar_code of type: string
Creating the entities
Navigate to Customization Sets
Click the Develop app, and then click on the Customization sets menu.
Create Customization Set
In the page that opens, click the Add button located above the list.
Name the Customization Set
In the page that opens, under the Edit section, fill in the Name of the customization set (e.g., products).
Add the Entity
Select the Entities tab, click the Add button, and fill in the entity name: product.
Add Entity Properties
Select the Properties tab, click the Add button for each property, and specify the Entity name, Property name, and Property type:
| Entity name | Property name | Property type |
|---|---|---|
| product | name | string |
| product | price | decimal |
| product | bar_code | string |
Save the Customization Set
Click the Save button.
Publishing the entities
After the previous state the entities are saved as a draft, in order to be able to use them they need to be published as database tables. To publish the entities:
Navigate to Customization Sets
If you are not already in the Customization sets menu, click the Develop app, and then click on the Customization sets menu.
Select Customization Set
Select the row containing the products customization set.
Publish Customization Set
Click the Publish button located above the list, next to the Add, Edit, and Delete buttons.
Creating the views
The views help the user interact with the entities, in Kodall there are two main types of views:
- The search view to display the entities as a table, apply filters, navigate, add, edit, delete or apply custom actions to entities.
- The edit view to add or edit an entity.
For this example we will first create a search view for the products.
Products search view
Navigate to Search Views
Click the Develop app, and then click on the Search views menu.
Create Search View
In the page that opens, click the Add button located above the list.
Configure Search Properties
Under the Search section, fill in the following fields:
- Title (in ui) = Products
- List name (in url) = productSearch
- Key name (in results) = key
Configure Filters
Select the Filters tab, click the Add button, and enter the following filter configuration:
| Title | Argument name | Input type | Operator | Property name |
|---|---|---|---|---|
| Name | nameArg | String | IsLike | name |
Add FETCH Query
Select the Fetch tab, and enter the following query:
FETCH product (key, name, price, bar_code) FILTER AND (${nameArg})
Test & Save
Click the Execute button to test the query, then click the Save button.
Product edit view
Navigate to Edit Views
Click the Develop app, and then click on the Edit views menu.
Create Edit View
In the page that opens, click the Add button located above the list.
Configure Editor Properties
Under the Editor section, fill in the following fields:
- Name (in url) =
.productEditor(Note: if the name starts with a dot, the editor will be rendered as a dialog; otherwise, it is a page) - Entity name =
product - Title new =
New product - Title edit =
Product - Title edit section =
Edit product
Configure Inputs
Select the Inputs tab, click the Add button, and enter the input configurations:
| Title | Property name | Input type |
|---|---|---|
| Name | name | String |
| Price | price | Decimal |
| Bar Code | bar_code | String |
Save Editor
Click the Save button.
Connecting the edit view to the search view
Open Search View
Click the Develop app, and then click on the Search views menu. Select the row containing the Products search view (with name productSearch) and click the Edit button.
Link the Edit View
Under the Search section, set the Edit view field to .productEditor (select it from the autocomplete list as you type).
Save View
Click the Save button.
Creating the App
Now that you have created the data model and the views you can use them to create the app.
Navigate to Menus
Click the Develop app, and then click on the Menus menu.
Create Menu
In the page that opens, click the Add button located above the list.
Configure Menu General Settings
Under the Edit menu section, fill in the following fields:
- Name =
Inventory - Node key =
inventory - Color =
#009933 - Letters =
 - Font awesome =
Yes
Add Menu Items
Click the Add button located above the list and enter:
| Name | Node item key |
|---|---|
| Products | #search\$productSearch |
Save Menu
Click the Save button.
Click the Reload button on your browser. In the upper right corner of the screen, you should see the Inventory app icon.
Click the Inventory app, and you should see the Products menu.
Now you should be able to search, add, edit, and delete products.