|
|
|
|
In this section of the tutorial you will perform two tasks:
Add a NeXTensio list to the page
Modify the list in order to use it in the front-end without any security risk.
To add and configure a NeXTensio list of products to the page, follow the steps below:
Open the index page in Dreamweaver.
Start the Create NeXTensio List Wizard from the MX Kollection tab of the Insert bar. The wizard is divided into four steps, which must be configured.
In the first step of the wizard define the database
information, the list's source table and how many records to display:
In the Get data from drop-down menu select the Table option, to have the wizard generate the recordset.
In the Connection drop-down menu select the Dreamweaver database connection created at the beginning of this tutorial: connList.
In the Table drop-down menu select the database table to list: products_prd.
The Primary key column is automatically detected by the wizard.
In the Detail page text box use the default value for the form page. This page will not need to be built.
In the Number of records text box enter the number of records to display per list page. By default, 10 records will be displayed.
In the second step of the wizard define the table
columns to display and their properties:
The List columns grid displays the table columns to list. Only the name, price and description must be shown. Configure this step as shown in the image above.
The third step of the wizard allows defining the
filter elements for the list. Since all fields are either text or numerical,
without foreign keys or look-up tables, the default text fields are good
enough. Therefore you can skip this step and move on to the last step
of the wizard.
In the last step of the wizard configure the list
properties: default ordering, skin, effects and buttons:
In the Default order drop-down menu select the name_prd table column. For the method, select Ascending.
In the Duplicate buttons drop-down menu select No. The buttons will be removed, and it makes no sense to have them twice.
In the Duplicate navigation drop-down menu select No as well.
The last option to change is Has row counter. Select No in the drop-down menu.
When all options have been set, click Finish to apply the changes brought by the wizard. Some page elements and server behaviors will be added.
If you save, upload, and preview the page in a browser now, aside the
basic list, the add new, edit
and delete buttons will be displayed - some
on each row, and others below, for multiple selections. Also, a column
of checkboxes is displayed:
In order to make the list suitable for public pages, you must remove all the buttons and checkboxes. Replacing the edit and delete buttons next to each record, a button to display product details will be created. To do so without affecting the list's functionality, follow the instructions below:
First remove the add new, multiple edit, and multiple delete buttons in the bottom row.
Place the mouse cursor before the drop-down menu that selects the number of records to add.
In the Property Inspector
select the div.KT_bottombuttons tag.
With the tag selected, press the Delete
key. The buttons will be removed. To check the result, save the page,
upload it, and preview it in the browser:
Next remove the checkbox column that is displayed first in the list:
In Dreamweaver
select the checkbox in the table header row. Then select its corresponding
<th> tag in the Property
Inspector:
With the tag selected, press the Delete key. This will remove the cell.
Next click the other checkbox in the table. Select the <td> tag from the Property Inspector (similar to the action performed before). Then press the Delete key.
The checkbox column has been removed:
The last step is to remove the individual edit and delete buttons, and replace them with the view button:
In Dreamweaver
select the edit and delete
dynamic links from the last cell of the table:
Press the Delete
key to remove them. With the mouse cursor in the same cell, type the name
for the new link: view. To make
it into a link, select the entire text and right-click on it. From the
pop-up menu select the Make link option.
In the Make link dialog box select the details page:
To instruct the details
page what details to retrieve, you must also pass the primary key as an
URL parameter. To add parameters to the link, click the Parameters
button. Configure the user interface that opens as shown in the image
below, by entering id_prd for the parameter name; for the value, select
the id_prd dynamic field from the NeXTensio list recordset:
Click OK twice to close the user interfaces and create the link.
To make the link use the same style as the
list, you must set the CSS class to use. With the newly created view link selected, switch to Code
view in Dreamweaver (View
> Code). On the line with the <a>
tag for the view link, add class="KT_link"
after the href attribute, and before the ending
>:
To test the link appearance, save, upload,
and preview the page in the browser:
The NeXTensio list has been completely
modified, and can be safely displayed in the public pages of your application.
Its filtering and sorting capabilities will make it easy to be used by
the visitors:
