In this section we will see a full App example. This consists of displaying a list with rows (table), being able to:
• Update a row using a form.
• Edit a row.
• Delete a row.
In this case we have chosen to show a table of clients named ctercero in the demo_apps_rv database.

# 2 Represent a data table

First of all, we are going to represent a data table. This data table contains the values of the SQL statement that we catalog in our wic. To catalog a SQL statement, please see SQL Catalog menu.

In this case, we catalog a SQL statement named: demo_apps_ctercero.

And his code is:

Copy
<select first='100'>
<columns>
<rowid table='ctercero' />,
codigo, nombre, cif, codare, user_created, date_created
</columns>
<from table='ctercero'>
</from>
<order>date_created DESC</order>
</select>

#### Info

Remember that once catalogued, we have to configure the output data table columns.

# 3 Add data table row

First off all, we catalog a SQL Statement to be able to insert a new row. In this statement we have to add a where conditions to reference in which rowid we are.

In this case is named: demo_apps_ctercero_form.

Copy
<select>
<columns>
codigo, nombre, cif, codare, user_created, date_created
</columns>
<from table='ctercero'>
</from>
<where>
ctercero.rowid = ?
</where>
</select>

#### Info

Remember that once catalogued, we have to configure the output form columns.

To be able to insert the table, we have to catalog a SQL transaction. Where the:

• Code it will be the name of transaction. In this example is named demo_apps_ctercero_form_insert.
• Type, in this case, it will be Insert.
• Table indicates on what table will we insert the row.

Also we can put a Validation statement, that before insert, it will validate if the condition is true.

To configure this...

Now, a Add blue button appears to the right of the screen.

If we click on it, a form appear to fill all the inputs. Once all inputs filled, click Add.

And you should see the row you inserted in the data table.

# 4 Update data table row

If we want toedit a row of data table, we have to add some code...

Firstly, we catalog a SQL Statement to be able to update a new row. In this statement we have to add a where conditions to reference in which rowid we are.

Copy
<select>
<columns>
codigo, nombre, cif, codare, user_created, date_created
</columns>
<from table='ctercero'>
</from>
<where>
ctercero.rowid = ?
</where>
</select>

In this case is named: demo_apps_ctercero_form. (The same as Insert part)

Before further, we have to catalog a SQL transaction, named in this case demo_apps_ctercero_form_update.

To be able to update the table, we have to catalog a SQL transaction. Where the:

• Type, in this case, it will be Update.
• Table indicates on what table will we update the row.
• Validation Statement validate the condition after update.

With all configured, it will appear an extra column named Actions with a edit button.

If we click on this edit button, it will appear a form with the values of this row. Now, we can edit any input and finish clicking on Update button.

# 5 Delete data table row

To be able to delete any data table row, we have to catalog a SQL transaction, in this case demo_apps_ctercero_form_delete.

• Code it will be the name of transaction.
• Type, in this case, it will be Delete.
• Table indicates on what table will we delete the row.

With this configuration, it will appear a trash button in the Actions column. If we click on this button, we can delete the row.

# 6 Setup appConfiguration.xml

If we copy the below code, and we paste in appConfiguration.xml, we will get the full simple app.

Copy
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<configuration>
<user>
<catalogExistsUser>frontend_exists_user</catalogExistsUser>
<catalogEditUserTrx>frontend_cterdire</catalogEditUserTrx>
<catalogGetUserData>frontend_user_data</catalogGetUserData>
<catalogGetExistsUserDir>frontend_exists_user_dir</catalogGetExistsUserDir>
<catalogGetUserSessionData>frontend_get_user_session_data</catalogGetUserSessionData>
</user>
<endPoints>
<endPoint type="LIST" title="TITLE_CLIENTS" titleSingular="TITLE_CLIENTS" path="customers">
<dataSQL>demo_apps_ctercero</dataSQL>
<filterPosition>BOTH</filterPosition>
<edit>
<update>
<dataSQL>demo_apps_ctercero_form</dataSQL>
<dataTRX>demo_apps_ctercero_form_update</dataTRX>
<condition>'CLI' == codare</condition>
<constraints>
<notEditable key="date_created"/>
<notEditable key="user_created"/>
</constraints>
</update>
<insert>
<dataSQL>demo_apps_ctercero_form</dataSQL>
<dataTRX>demo_apps_ctercero_form_insert</dataTRX>
<constraints>
<default key="date_created" value="${CURRENT}"></default> <default key="user_created" value="${USER}"/>
</constraints>
</insert>
<delete>
<dataTRX>demo_apps_ctercero_form_delete</dataTRX>
</delete>
</edit>
</endPoint>
</endPoints>
</configuration>