Examples of components

In this example we will create a webpage containing a bunch of movies. We’ll be able to redirect to the detail page of one of those movies so we can see a description of that given movie.

Sam van de Kreeke

Published: 10-06-2020

Last updated: 27-08-2020

Let’s get started by creating our movies web page. Click on the New Page button in the pages tab and create the web page. The canvas is empty upon creation, let’s change this by dragging our first component onto the canvas: a Column!

Inside this Colum we’ll drag a DataTable, in order for this DataTable to work properly we need to select a model. Click in the DataTable and select (in this case) the Movie model, make sure to create the model if you haven’t yet! 

Now that our model is assigned to the DataTable we can start adding the properties to the DataTable. This is done by clicking on a column and adding a property in the options.

Make sure to edit the Header Text so it indicates what property is being displayed inside the column, in this example the first column will yield the movie’s title. To display all our movie titles we need to click on the Text field inside the column. 

We can define what content should be displayed in the column, click in Variable Icon and select the title property. In the second column we’ll add the movie’s description. Now it’d be nice to have a button that redirects us to the details page of a movie. Let’s add a column to the DataTable. We can add another column by simply clicking on an already existing column and copying it by clicking the clone button.

We can now edit this newly cloned column to our needs. Let’s remove the Text field and drag a button component onto the column.

In the button options we can now change the name of the button to something like: Details to indicate it redirects the user to a detail page of a given movie. We have a lot more customization but let’s focus on some more technical aspects. Let’s make sure the button links towards the detail page of a movie. To do this under the link to option check the internal page. We can now select a page, if you haven’t created a page yet make sure to create a new one for our detail page. Our current page is named /movies we’ll name the details page /movies/:movie_id the ‘:movie_id’ is the variable we’ll pass from the movies page. We can now if you created the web page select it and add a variable, in this case the movie’s id.

Detail page

For our detail page we’ll take a different approach, there’s no need for a DataTable here instead we’ll use the 2 columns components. In the left column we’ll add an image component and in the right one we’ll add a title- and text component. Before adding them make sure to add a DataContainer in both the columns so we can assign the given movie.

Inside the options of the title component we can define what content should be displayed, click on the variable icon and select our  movie’s title. We can do the same for the text component but instead we’ll display the movie’s description there. 


Not sure where to start?

Click here to register and start learning