React pages templates and plugins overview

This section explains how to customize Portal pages built with ReactJS. This functionality is only available for the Collections Page at first.

How to set up an environment

Install some development tools using the following commands:

Install nodejs:

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
yum install -y gcc-c++ make
yum install nodejs

Install portal build environment:

cd /opt/cantemo/portal/portal_media/js
yum install git
npm install

After this you should be able to follow the instructions below.

There are two ways to customize Portal pages built with React. Let’s start with the simplest one.

I. Plugins

The plugins are located in following directory: /opt/cantemo/portal/portal_media/js/app_react_plugins/

../_images/plugins-directory-structure.png

We have three plugin areas on the collections page where you can insert your own custom functionality. As you can see by their names, one is located on the main gearbox, one each type of pods we have on display. Collection pod and item pod.

../_images/plugins-ui.png

Using these three plugins you can add extra options <li>OPTION</li> to each of the gearboxes and you can also add functionality to your new options.

Adding functionality

Here is an example of the plugin located inside the main gearbox menu:

const GearboxPlugin = React.createClass({
    render: function() {
        let activePlugin = false;
        if (activePlugin) {
        return (
            <li><a href="javascript:void(0)">Console log this</a></li>
        );
        } else {
            return (null);
        }
    }
});

In order to add a very basic functionality to our Console log this option, let add an onClick event and then console.log a text when that event gets triggered:

const GearboxPlugin = React.createClass({
    testFunctionality: function() {
        console.log('testing');
    },
    render: function() {
        let activePlugin = false;
        if (activePlugin) {
        return (
            <li><a href="javascript:void(0)" onClick={this.testFunctionality}>Console log this</a></li>
        );
        } else {
            return (null);
        }
    }
});

As you can see, we’ve added a new function testFunctionality. We are going to call this function whenever we click on the Console log this option we’ve previously created.

You can find multiple ways of editing React code in the official documentation: https://reactjs.org/docs/hello-world.html

Rendering

Out of the box, all plugins are disabled. In order to enable them and make them show up in the UI, you need to go inside each plugin file and change the following line from:

let activePlugin = false;

to:

let activePlugin = true;

This will make the plugin show up on the page.

II. Theming

The templates are located in this directory: /opt/cantemo/portal/portal_media/js/template_engine/ There will be individual directories for each customizable page.

This focuses on the collections page. The collections page default template is located here: /opt/cantemo/portal/portal_media/js/template_engine/collections/default/. Please do not modify these files. If you will to customize something, you will need to copy that particular file into the /opt/cantemo/portal/portal_media/js/template_engine/collections/custom/ directory and you must respect the exact folder structure and file names from the default template.

../_images/directory-structure.png

So for example, let’s say you want to customize the way Item pods look and work. In order to do this, navigate to /opt/cantemo/portal/portal_media/js/template_engine/collections/default/components/ and copy the item-grid.js file. Now go to /opt/cantemo/portal/portal_media/js/template_engine/collections/custom/, create the components folder (if it doesn’t already exist) and paste the file you’ve copied there.

The last step you need to do is to actually compile all the files. In order to do that, you have to be in the /opt/cantemo/portal/portal_media/js/ directory. From here simply run this command ./start-templating-script.sh. This will install everything needed for the compiler to work, it will compile the files and it will then watch for further changes you do to the templates.