Add a Module to a Page

This article will cover how to add modules (datatables, calendars, etc.) to web pages in Solodev. There are a few essential concepts to cover. In the case of a datatable-powered website form module, the process is fairly easy, simply selecting the drop zone where you'd like your form to populate. In the case of a calendar-based manager, the process is a bit more complex.

For calendar-based managers, they need to be placed on index and detail pages. The index page of the manager displays a specified number of entries within the manager.

The detail.stml page is used to dynamically create detail pages for each module entry by mapping the page and its parent category to the manager. This must be done before adding the calendar-based manager to the page.

Adding a Datatable to a Web Page

Step 1 - Open the page where you would like to add the datatable

Step 2 - Select the drop zone where you would like to add your manager 

Step 3 - Click on the Datatable in the left tree and click Publish.

Your web page is now ready to accept form submissions as shown below.

Step 5 - Open your Datatable to see your form submissions 

Step 6 - Click on an entry to view its details

Below is the detail view of the form submission clicked on in the previous step.

Adding a Calendar to a Web Page

Note: This tutorial is assuming you have already built a calendar and its associated index and detail pages. Click here for more information on adding a calendar in Solodev.

Step 1 - Open the Calendar and click Modify

Step 2 - Click on the Website Properties Tab

Step 3 - Click on the Browse button under SEO URL Encoding (STML Template)

Step 4 - Select the detail page of your Calendar and click Choose

Step 5 - Click on  the Browse button under SEO URL Encoding (Asset Category Map Anchor)

Step 6 - Once both SEO URL Encoding fields are selected, click Submit

Now that your calendar is mapped to your index and detail pages, as well as the folder containing them, web pages will be dynamically created for every calendar entry. It's time to add the calendar to a web page and see it in action.

Step 7 - Open the index page where your calendar will be placed

Step 8 - Click the drop zone where you want to place it until it turns blue

Step 9 - Select the blog repeater template from the left hand tree. Click Publish.

Your blog index page will appear as it does below.

Step 10 - Open the detail page where your calendar will be placed

Once the dropzone turns blue, select your blog detail template and click Publish. This page will serve as a template in which each calendar entry is created and a page title is dynamically printed, creating an SEO-friendly URL.

Now that you're index and detail templates have been placed in your index and detail pages, all of which are mapped to your calendar, you will see all entries on your index.stml page as shown below. Once clicking on an entry you will be directed to a dynamically generated URL for that given entry which employs the design template for the detail page and displays the appropriate data from a single calendar entry.



Although this page is generated by detail.stml, the url is dynamically generated and in this case, titled


Please sign in to leave a comment.
Have more questions? Submit a request