Building Modules

This article will walk you through building the specific types of modules you can import into your existing or new website. In our first example, we will create a category group and then create a news calendar that incorporates the group.

Within your config.json file, the modules property accepts the following keywords:

Name Description
module_type This can be a "Calendar", a "Datatable", or a "Datatable_Category_Group"
to_path This specifies the location where the module will be placed
name This is the name of the module you specify
form_template This is the HTML Form that allows you to add items to your module's table schema
file_path This specifies where the form template will reside
display_template This is the repeater template that displays module entries
detail_display_template This is the detail template that displays the details of a single module entry
dependent_templates

You can specify any template files which will use the data in a given module. By setting up dependent templates, you enable the use of the repeater tag which is important in the use of a running list of news, blog, events, or other calendar entries.

name: the name of the dependent template

from_path: where the template is located in your zipped folder

to_path: where the template is to be placed

html_template

The governing html or .stml page where the datatable will be publicly visible

display_type If your module is a "Calendar", you can specify its display type by choosing between "News", "Blog", "Events", "Photos", "Landing Page", or "Custom". If your module is a "Datatable", ypu can specify its display type by choosing between "General", "Web", or "Form"
datatable_category_group

This associates a specific datatable category group with the module.

entries

With the config.json file, you can include entries in your module as soon as it is created. Each entry needs:

fields: the content for the entry unique to the table schema. For example, an entry in a "News" Calendar would need the "event_title", the "start_time", an "intro", and the "description".

files: any associated files with the entry such as an "image".

categories: any category you wish to place the entry.

categories

If your module type is a "Datatable_Category_Group", you can specify the categories you want to create by default. Each category item needs the following fields:

name: the name of the category

title: the title of the category

menu: how the category would appear in navigation

children (optional): any subcategory.

Building a Category Group

The following code creates a category group named "News Categories." This category group will have the three top-level categories of "Business Development," "Marketing," and "Support." Additionally, the "Business Development" category will have the child categories of "Research" and "Finance."

{
"module_type": "Datatable_Category_Group",
"to_path": "web files/managers/news",
"name": "News Categories",
"html_template": "www/news/index.stml",
"categories": [{
"name": "business-development",
"title": "Business Development",
"menu": "Business Development",
"children": [{
"name": "research",
"title": "Research",
"menu": "Research"
}, {
"name": "finance",
"title": "Finance",
"menu": "Finance"
}]
}, {
"name": "marketing",
"title": "Marketing",
"menu": "Marketing"
}, {
"name": "support",
"title": "Support",
"menu": "Support"
}]
}

Building a Calendar

The following code creates a calendar named "News." Take note of several key areas including "dependent_templates." By specifying "dependent_templates," you enable those specific template files to utilize the repeater tag and can properly associate the datatable's content with that template. With calendars, you can even populate the datatable with content by using the "entries" field. An entry is created entitled "A News Entry" with the "Support" category and with an associated image.

{
"module_type": "Calendar",
"display_type": "News",
"to_path": "web files/managers/news",
"name": "News",
"form_template": {
"file_path": "managers/news/_Assets/news-form.tpl"
},
"dependent_templates": [{
"name": "home-news.tpl",
"from_path": "content/home/",
"to_path": "web files/content/home/"
}, {
"name": "news-custom-repeater.tpl",
"from_path": "content/news/",
"to_path": "web files/content/news/"
}, {
"name": "about-news-section.tpl",
"from_path": "content/about-us/",
"to_path": "web files/content/about-us/"
}],
"datatable_category_group": "web files/managers/news/News Categories",
"html_template": "www/news/detail.stml",
"entries": [{
"fields": {
"event_title": "A News Entry",
"start_time": "4/08/2016 12:00 AM",
"intro": "A Brief Introduction or Subtitle",
"description": "<p>Include your entry's content here. As you can see, you can use <strong>HTML</strong> markup.</p>"
},
"files": {
"image": "managers/news/_Assets/a-news-entry-image.jpg"
},
"categories": [
"support"
]
}
}

Associating a Page with your Module

Creating a module is only one part of making a functional website package. You will often want your module to display entries on the front end. To do this, you have to create a page and include a template file which uses the datatable module. In most instances, you must also create a child "detail" page which is used to display the results of single entry. The below code creates a "News" page, embed's the "news-custom-repeater.tpl" (specified as a "dependent_template" above) in a specific DynamicDiv, in addition to creating the child "detail" page. 

{
"title": "News",
"name": "news",
"template": "web files/themes/contentTemplateSansLeftNav",
"datatable_category_group": "web files/managers/news/News Categories",
"meta_description": " ",
"meta_keyword": " ",
"contents": [{
"area": "dd.0.1.1",
"type": "file",
"from_path": "web files/content/news/news-custom-repeater.tpl"
}],
"children": [{
"title": "detail",
"name": "detail",
"template": "web files/themes/contentTemplateSansLeftNav",
"structure_page": 0,
"meta_description": " ",
"meta_keyword": " ",
"contents": [{
"area": "dd.0.1.1",
"type": "file",
"from_path": "web files/content/news/news-detail.tpl"
}]
}]
}

Building a Datatable

In the above examples, building a category group and a calendar have been covered. You can, however, additionally create generic datatables such as a simple form. The below code creates the "Contact Us" form module.

{
"module_type": "Datatable",
"display_type": "Form",
"to_path": "web files/forms/contact",
"name": "Contact Us",
"form_template": {
"file_path": "forms/contact/_Assets/contact-form.tpl"
},
"return_template": {
"file_path": "forms/contact/_Assets/return-template.tpl"
},
"dependent_templates": [{
"name": "contact-us.tpl",
"from_path": "content/root/",
"to_path": "web files/content/root/"
}, {
"name": "footer-contact-form.tpl",
"from_path": "forms/contact/",
"to_path": "web files/forms/contact/"
}]
}

In the this example, you will see that a form datatable is created based upon the "contact-form.tpl" template. It additionally specifies a "return_template," which is the template used after a user submits the form. Finally, it specifies "dependent_templates," which will use the form on the front end.

However, like the previous example, you still need to associate the module's dependent templates with a page in order for the module to be publicly visible. The below code creates a "Contact Us" page that includes the dependent template "contact-us.tpl." This template will embed the contact form into the page.

{
  "name": "contact-us",
  "title": "Contact Us",
  "to_path": "www",
  "template": "web files/themes/business-theme/contentTemplateSansLeftNav",
  "rank": 5,
  "meta_description": " ",
  "meta_keyword": " ",
  "contents": [{
    "area": "dd.0.1.1",
    "type": "file",
    "from_path": "web files/content/root/contact-us.tpl"
  }]
}

In summary, building a module with your config.json file takes a little work. However, once you've mastered the technique you'll be able to fundamentally take charge of your Solodev package and build fully functional websites.

0 Comments

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