Create a database list

The database is a page component for the CMS. It will generate a list of database entries responding to the category and filters selected. (see database management articles for CMS).

In this example we are going to create an example of a database list for the portfolio database component we built in the previous article.

Step 1: Create a page component

Go to the developer start page and click Page Components.

step1-15

step2-20

(1) Name your page component

(2) click Add Component to create it

Step 2: Build the form structure

Click on the name of the component you created to add a form structure.

step3-19

Add a single normal item to the form.

step4-12

(1) Create the main structure as a normal single item

(2) Click Add item

(3) Click on the newly created item to add input variables

Step 3: Add database list input variable

Select Database list from the component list and click Add Component

step5-10

Click the database list component for set-up.

step6-8

Step 4: Setup database list

Check the following:

step7-4

(1) Select the database to which the list corresponds

(2) Creates the HTML code for a single list item

(3) Get the variables from the corresponding database component

(4) A list is generated using the categories and filters we created in previous articles. If you want to overwrite this method and use a manual pick method you will need to activate this here.

(5) If you use the manual pick method you need to set how many picks are the max for the CMS user

(6) Select the default page where the database belongs to. Example if you built a blog database you will select the blog page as the default page for the blog articles.

Input the static HTML code for a single list item in the code editor.

step8-1

(1) The HTML code for a single list item

(2) [:swdbdetaillink:] automatically generates the link to the corresponding detail page

(3) Click Auto create vars to get the input variables of the database component entry.

Auto Create Vars:

step9-1

(1) Select the database component you wish to get the input variables from.

Click Add Code Below.

Place the input variables in the static HTML code. See example below.

step10-1

Return to the previous page and click Code Editor.

step11-1

Step 5: Create component HTML code

Just like the database component we are going to create the front-end code for the database list.

step12-1

(1) Click Auto Create Vars

(2) Select Overwrite Code to create a new structure. (Click Add Code Below if you already have code you don't want to overwrite)

The database list HTML Code:

step13

(1) The [:renderlist:ID:] variable will automatically add all list items with the HTML code from step 4.

(2) You can add custom CSS or JavaScript to the component

(3) If you are working with a designer you might want to add design panels so (s)he can style the component.

IMPORTANT: make sure that Reload Page After Changes is set to ON. (not Off like the picture above)

Conclusion:

The database is now ready for use. See the documentation about using database management for the CMS.

Add the portfolio list to a page and start adding entries.