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.

Screenshot_151

 

Screenshot_152-1

(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.

Screenshot_153-2

 

Add a single normal item to the form.

Screenshot_154-1

(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

Screenshot_155

 

Click the database list component for setup.

Step 4: Setup database list

Check the following:

Screenshot_156

(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.

Screenshot_160-2

(1) The HTML code for a single list item

(2a) [:swdbdetaillink:] automatically generates the link to the corresponding detail page
(2b) You can now add a link to a detailpage without setting the list id parameter by using [:swdbdetaillink:nolid:] instead of [:swdbdetaillink:] this will remove the parameter behind your detail page link. Learn more here

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

 

Auto Create Vars:

Screenshot_159-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.

Screenshot_158-1

 

Return to the previous page and click Code Editor.

Screenshot_162

 

Step 5: Create component HTML code

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

Screenshot_161-1

Click the triple dots next to the item to access the variables.

 

The database list HTML Code:

Screenshot_163-1

(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

Screenshot_164

 

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.