Building a database component

In this example we are going to build a very simple detail page for our portfolio database. We are also going to prepare the input fields for our database list (see next article).

Step 1: getting started

Go to the Developer start page and click database components. Click on the name of your component.


Step 2: single form structure

Add a single item to the form of your component. It is very important that you pick a single normal item. Only these variables can be used when building our database list later.


1) Give your item a name

(2) Select Single item!

(3) Select Normal (default value)

(4) Click add item to create this structure

(5) Go to the code editor by clicking it

Step 3: static code

We are going to add HTML code to our component.


(1) Click Auto Create Vars

(2) Select Overwrite Code to create a clean code structure

Next we are going to add our static html code in the code editor.


(1) The html code structure for the detail page of our portfolio blog (detail picture below)

(2) We add custom coded CSS or JavaScript to our component (optional)

(3) Click save

(4) We can add Design Panels for the design editor instead of using coded CSS. This step is optional and only recommended if you are working with another designer who wants to be able to style the component himself. (optional)

(5) Go back to the form builder we are going to add input fields to the form to replace our static code.

Zoom in of our example code:


(1) id scomp[:swpageitemid:] and class s-comp[:compid:] is used for the design panels and is needed to create instances. See article about design panels.

(2) s-btn is one of the design classes you can use

(3) [:swprodbackbtn:] generates the link to return to the database list page

Step 4: Creating input fields

In the form builder click on the item we created in step 2.


Add the input fields we need for this example.


(1) Click add component to install 1 uploadfile and 2 text fields.

(2) Click on the Components for set-up

Picture upload file setup. We are going to upload a picture and we need two dimensions. One for the database list tile we are going to create in the next article and one big format for our detail page.


(1) Select the label for the input field

(2) Maximum width for the picture in pixels (in this example 400px for the tile)

(3) Maximum height for the picture in pixels (in this example 200px for the tile)

(4) Select the available extensions for the file.

(5) Force the CMS user to crop the image to the width / height dimensions

(6) Add maximum width for the extra dimension (in this example for the large picture)

(7) Add maximum height for the extra dimension (in this example for the large picture)

(8) Click save

Textinput set-up examples:


Add a single input line for the title.


Add the texteditor for the content copy.

Click back to return to the Component overview. Click Code Editor to return our static html code.


Step 5: Add input variables to static code

In this step we are going to copy paste our variables into our static html code. Now CMS users will be able to edit their own database entries.step10


(1) Click Auto Create Vars

(2) Select Add Code Below. This makes sure our static code is not overwritten

Place the generated input variables in the corresponding places in the code editor. It is possible that the id's of the variables are different in your project. They should look similar however if you are following this example.


Don't forget to click save when you are done.

What's next?

Now that we have created our database component you can start creating entries in the CMS using Database Management. (see article).

We still need to build our database list page component. This component will show our portfolio items on a page. (read next articles)