Skip to main content

Customers Admin Page

In this step, we will build a page that will interact with Data² Table, a database where important information for our applications is stored.

This page will perform read, write, update, and delete operations. These operations have a very commonly used acronym called CRUD (Create, Read, Update, Delete). For viewing (reading), we will use a table block provided by Data² called DataGridBlock, and for the other operations, buttons and text controls will be used.

The end result will be an Artboard similar to this:

Customer page result

This Artboard has:

  • A table so you can view and select your customers.
  • Two text fields linked to the Name and Email of the selected customer.
  • Insert Button
  • Edit Button
  • Save Button
  • Cancel Button
  • Delete Button

Creating a Data² Table

To create a Data² Table, double-click on the Builder background, and in the menu select the Registry tab in the left sidebar. Click Table to add the Data² Table.

Click on the Table name to select it. Let's change its name to know what it is about. In the Inspector, at the top there is a text box to change the Display Name of the table, put Customer table.

It is necessary to configure which fields we will save from our customers. Let's create two fields: name and email.

  1. With the Table selected, in the Inspector click on Schema and the Inspector will "navigate" into that property.
  2. Click on Add Item.
  3. In Title write name.
  4. Under Component, select data2-core-primitives@String.
  5. Add another field, this time with email as Title, and use data2-core-primitives@String as Component again.

Creating a DataSet

We interact with the Table through the DataSet. To create a DataSet for the first time, click on the bottom of the table. To create other DataSets, click on the + at the bottom of the table.

Select the DataSet you are going to use, clicking on its name at the bottom of the table (next to the +), and in the Inspector change the name to All Customers.

Creating a page linked to DataSet

Add a new Artboard by double clicking on the background and selecting Artboard from the menu.

Adding the table block​

Select the Block Tool and draw a larger block to contain the table, inputs and buttons.

Draw a block to be the table inside the previously drawn block. To change the block type, go to the Inspector and click on the top part where there is the text data2-core-primitives@Block. A menu will open, look for DataGridBlock and select that option.

To configure the DataGridBlock parameters, hiding the Block parameters makes it easier, you can do that by clicking on the arrow in the section titled Block.

Enable the Dataset parameter and select the All Customers DataSet.

Adding the text fields​

Now use the Block Tool to draw two blocks below the table. Select both blocks at the same time by selecting one, holding SHIFT and clicking on the second. Then, switch data2-core-primitives@Block to DataFieldBlock.

Still with both DataFieldBlocks selected, let's set the DataSet parameter to All Customers.

Using the Selection Tool, click on another block to deselect the two DataFieldBlock. Select the first text field and set the Field to be All Customers -name. In the second DataFieldBlock, set Field to be All Customers - email.

All Customers - nome

All Customers - email

Adding the buttons​

Add another block with the text Insert. This time, let's configure the On Click parameter, that is, what should happen when the block is clicked. In Module select All Customers, and in Interaction select Insert.

Configured insert button

Do the same process to create buttons for the Interactions:

  • Save
  • Edit
  • Cancel
  • Delete

Tip: You can hold ALT and drag a block to duplicate it.

At the end of this process, we have:

Buttons end result

Testing what we've built so far​

Click the Preview button under Artboard and try to:

  1. Click on insert, add information and save. When refreshing the page, the saved data should appear in the table.
  1. Insert another customer and save.
  1. Selecting a customer from the table should change the value of the text fields.
  1. Select a customer, click on Edit, change a field and save.
  1. Selecting a customer, clicking on Edit, changing a field and clicking the Cancel button should return to the original value.
  1. Select a customer and delete.

If all these cases worked, the page is working fine!

Routing

Now that we have two Artboards, we would like the / route to show our home page, and the /customers route to show the client administration Artboard. For this, we will need to:

  • Create a Router, which will be used for creating routes.
  • Use the Router as the Entry Point of the Application.

Adding the Router​

To add a Router, double click on the background of Builder. In the Ui tab, the same one where the Artboard and Application are located, click on Router.

Adding Router

Configuring the Router​

Give your Router a name like Main Router by changing the Display Name in the Inspector.

Then put / in its Initial Path.

Router with Display Name and Initial Path

Click on Routes to configure your Router routes. Double-click Add Item to add two routes, one for the homepage, and one for the customer administration page.

Let's configure the home page route, to do that, click on the first item that was added. Two parameters will be configured:

  • In the Path parameter put /
  • In the Content parameter, click on the circle to enable the parameter and select the Homepage Artboard.

To get back to the list of routes, click on Routes just above the Route section and then click on the second route.

  • In the Path parameter put /customers
  • In the Content parameter, click on the circle to enable the parameter and select the Customer Administration Artboard.

To save, deselect your Router by clicking on the Builder background.

Using the Router as the Entry Point of the Application​

Select the Application and change its Entry Point:

  • In the Component parameter, change data2-core-primitives@Artboard to data2-core-primitives@Router.
  • In reference, select the name of the Router created previously, in this case, Main Router.

Preview the Application. Initially it should open the homepage. When changing the URL from /?d2_pl-prv=true to /customers?d2_pl-prv=true, the customer administration page should appear.

To add a link from the home page to the customer administration page:

  • Draw a block that will be used as a link
  • In the On Click parameter, select your Router Main as Module, and in the Interaction select goTo.
  • In the Path to Route parameter, put the Path of your client administration page, which in this case is /customers.
  • Put a text also to know where the link goes when clicked, you can double click on the block to write directly on it.

Do the same to add a client admin Artboard link to the home page, with one difference:

  • In the parameter Path to Route put / instead of /customers.

Link para página inicial

Preview your Application and test if the links are working!