====Creating a New Page====

This will guide you through adding a new page to our basic [[editing|electron framework]].

===Step 1: Create HTML and JS Pages===

Choose a name for your page, such as 'linechart'.

Create two files in the **src/content** folder - one called '<name>.html' and one called '<name>.js'.

===Step 2: Create Your Page===

In the //html// file, add the content of your page. We suggest placing the bulk of your content in an object with the class name 'focusimage', as the content of that object will be saved when pressing 'Save...' in the menu.

For example if your page was just going to include an SVG image, your HTML would look like this...

<code html>
<svg class="focusimage">

</svg>
</code>

===Step 3: Create Your Javascript===

Next, you need to add a couple of functions to your //js// file.

Our framework calls two functions from your Javascript code.

The **initPage** function is called once the page is loaded and ready to be drawn.

This is where you might want to use the data [[functions and properties|functions]] such as **LoadLiveData**.

<code javascript>
window.initPage = function () {    
    //Call a function that loads the data we want to chart...
    reloadChart();    
}
</code>

And the **refreshContent** function is called every time the page may need to be redrawn. This includes live data updates and screen resizes.

This is where you might want to take advantage of [[functions and properties|variables]] such as **liveData**.

<code javascript>
window.refreshContent = function () {    
   console.log('Draw Stuff Here!');
};
</code>

You can optionally also provide a **toolTipUpdate** function that is called when a tooltip needs to be updated.

<code javascript>
window.toolTipUpdate = function (ob) {
    return ob.getAttribute("data-name") + ": " + ob.getAttribute("data-value");
};
</code>

===Add to Navigation===

Finally, you can add your new page to the navigation.

Open **index.html** and find the **nav** object.

<code html>
<nav class="uk-navbar-container primary" style="width: 100%;">          
    <ul class="primary headnav" uk-tab style="margin-bottom: 0px;">
            <li class="uk-active"><a href="#" data-panel="bar">Bar Chart</a></li>
            <li id="nav_2"><a href="#" data-panel="diag">Mine Face</a></li> 
            <li id="nav_3"><a href="#" data-panel="hmap">Face Maps</a></li>
            <li id="nav_4"><a href="#" data-panel="tmap">Shearer Maps</a></li>
    </ul>          
</nav> 
</code>

You can add extra 'li' elements to add more navigation options. Make sure you edit the value of **data-panel** to match the name of your new page (for example, 'linechart' if your files were named 'linechart.html' and 'linechart.js').