Modules

Modules allow you to extend and modify SonicJs' capabilities. Module files are isolated in their own folder yet can alter both core functionality and even functionality of other modules.

SonicJs modules are extremely powerful and flexible. Unlike most CMS, where modules offer only "bolt-on" style extension with perhaps some APIs to plug into, SonicJs allows the developer to completely alter the functions and/or data used throughout the system.

Module can have a front end UI component, meaning that they can be added to a page, or can be back-end only, meaning that they apply business logic or process/alter the data used by the system.

The easiest way to explore the awesomeness of SonicJs modules is to build an example. Let's do that!

Hello World Part 1

We'll create a "Hello World" module in part 1 and then extend it in the subsequent parts. Let's get started!

From the Admin, Select "Modules" from the left side navigation
Click "New Module"
Module title -> "Hello World" , System Id -> "hello-world"
Leave "Can Be Added To Column" set to true.
Click "Create Module"

That's it! We've created our first module and can now add it to a page.

Optional: Before we do that, open your project in your favorite IDE (ie VS Code) and check out the new files generated for you in this folder: /server/modules/hello-world

Next, if you haven't already, add a page to your site. Call it "Sandbox" or whatever you want.
Next, create a section on the page
If you're not sure how to create a page, please see the "Create Page" section in the User Guide
Click on "empty column" to select the column
Click on the Module dropdown and select "Hello World"
Enter your first name or type "Bozo" if you feel like a clown :)
Click "Submit"

You should now see your module added to the page and it should be displaying the data that you entered in the First Name field.

Hello World Part 2

Now, let's dig in a bit to our module and make some changes. Currently the output of our module looks like this:

test

Now when we click on our module, then click the "edit" icon, we'll see our edit screen:

But when we click on submit, the view hasn't changed. So we now need to update our view to use the new data field.

In your favorite IDE (ie VS Code) open up the view file for your module located here:

/server/modules/hello-world/views/hello-world-main.handlebars

Now we'll add {{ data.lastName }} , our view now looks like this:

After you save your update, the web server will automatically restart. All we need to do is go back to our webpage and refresh:

In conclusion, we updated the data model for our module using the drag and drop form editor and then updated the view to use our new data field.

Hopefully you are beginning to see the power and flexibility of SonicJs as a content management system.

Next, we'll take a look at SonicJs' ultimately power tool; Hooks!

Hello World Part 3

Now, let's add a hook and add some simple business logic to our module.

We'll replace the "Hello to you" in our template with some dynamic text depending on the day of the week. For example: "Happy Monday..."

To do this we need to use a hook and modify the view model being used for our view template.

Open up the hello-world-main-service.js file in your module and add a new event subscription inside of your startup function:

 eventBusService.on("postModuleGetData", async function(options) {
if (options.shortcode.name === "HELLO-WORLD") {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
let dayOfTheWeek = weekday[d.getDay()];
options.viewModel.data.greeting = `Happy ${dayOfTheWeek}`;
}
});

Now we just need to make a small tweak to our template in order to use the new greetings property:

<div>{{data.greeting}} {{ data.firstName }} {{ data.lastName }}, from the Hello World module!</div>

Which gives us the final result:

Conclusion

At this point, hopefully you have at least a high level idea of how modules work within SonicJs.

As you may be starting to see, hooks allow you to inject business logic into various stages of the module's processing in order to achieve your specific use case. Hooks can also alter SonicJs' core functionality to meet your needs.