Storing Data in a Separate Module

Introduction

It is not an uncommon programming practice to separate the data from the presentation and program execution. You can do this using JavaScript modules. This document will show how to create a variable in a data module then use it in your plugin implementation code.

The basic implementation steps are:

• Create a data module and store in variables the data you wish to use in your plugin implementation.
• In an element module, accept the data as a parameter for a function that displays or utilizes the data as your wish.
• In your controller, pass the data as a parameter when calling the function that displays or utilizes the data.

Examining the code

The use case shown in the following code examples is creating the HTML as a variable in the data module then passing it to a custom page to be displayed. For line-by-line details on the actual code used see the Creating a Custom Page document. The emphasis in this document is to see how the data is created and distributed for use.

The first code block shows the contents of the data module. A single variable is created and exported for use by the controller. Of course multiple data variables may be created in the data module.

var pageContent = '<h2> This is content in the <em>custom page</em> passed as a parameter from a data file</h2><br>'
  + '<p>You can build your HTML in many ways and the page can contain the content you choose. You are NOT limited to the page types shown in the page layout UI.</p><br>'
  + '<p>Even use images!</p>'
  + '<img src="https://solutions.brightcove.com/bcls/beacon-plugins/yachats-far.png">';
  
export { pageContent };

This code shows how the custom page element's module will display the data. In this case it gets the <div> element designated for the custom page's HTML and then places that HTML into the <div>.

const populateCustomPage = (pageContent) => {

  var customPageArea = document.getElementById('custom_page_area');
  customPageArea.insertAdjacentHTML('afterbegin', pageContent);

};

export { populateCustomPage };

The last task is for the controller to utilize the data by passing it to the function to display the data. The variable defined in the data module is imported, along with the function that displays the content. In this use case, the code checks to see if the page just loaded is the created custom page, and if yes calls the function to display the data while passing the data variable to the function.

import { pageContent } from './data.js';
import { populateCustomPage } from './custom-page-module.js';
...
case 'onBeaconPageLoad':
  if (event.data.data.slug == '24849-custom-for-plugin') {
    populateCustomPage(pageContent);
  }
break;