Adding a New Global Page

The default pages found in ES are rendered using the ES rendering framework. The following are the two ways in which you can add a new page:

Adding a new global page with the existing view

Follow the instructions below to add a new global page with the default views in ES:

For more information on app extensions, see Introduction to App Extensions.

Create the shell of an app extension. For more information, see Creating the Shell of an App Extension.

Create a blank .jag file in the app extension pages directory (e.g., help.jag) as the controller to serve the new page. The pages directory of the Publisher and Store app extension are as follows:

ES Component	Directory
Publisher	`<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/<APP_EXTENSION_NAME>/pages`
Store	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/<APP_EXTENSION_NAME>/pages`

Add the following code into the newly created blank .jag file, and define the required additional customizations. When creating a new page with the existing ES view, the following is the minimum code that is needed to invoke the ES render method.
```
var caramel;
var data={};
caramel = require('caramel');
caramel.render(data);
```

Create a blank .js file in one of the following renderers directories based on your customization requirement. Note that the file structure in the renderers directory should mimic the path to the controller. In addition, the renderer should have the same name as the controller (e.g., help.js).

ES Component	Directory
Publisher	`<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/<APP_EXTENSION_NAME>/themes/default/renderers/pages`
Store	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/<APP_EXTENSION_NAME>/themes/store/renderers/pages`

Example:

The following table explains the location that the renderer should be added based on the controller.

App Extension Component	File	Directory
Controller	`help.jag`	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/servicex/pages`
Renderer	`help.js`	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/servicex/themes/store/renderers/pages`

Add the following code to the newly created blank .js file, which is the renderer.

var render = function(theme, data, meta, require) {
	theme('single-col-fluid', {});
};

Define the new page in the app.server callback method of the app.js file in the Publisher or Store, based on your customization requirements. When defining the page, map it to a URL pattern and a controller.

The app.js files of the Publisher and Store app extension are as follows:

ES Component	File Path
Publisher	`<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/<APP_EXTENSION_NAME>/app.js`
Store	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/<APP_EXTENSION_NAME>/app.js`

Example:
The following code snippet explains how a new page named help, which is defined in the help.jag file, is defined.

app.server = function(ctx) {
    return {
        endpoints: {
            pages: [{
                title: 'Help',
                url: 'help',
                path: 'help.jag'
            }]
        }
    };
};

Access the respective ES console and navigate to the newly created page. A blank page appears with minimal ES styling.

If the page exists in the Publisher:
http://<ES_HOST>:<ES_HTTP_PORT>/publisher/app/pages/<PAGE_NAME>
https://<ES_HOST>:<ES_HTTPS_PORT>/publisher/app/pages/<PAGE_NAME>
If the page exists in the Store:
http://<ES_HOST>:<ES_HTTP_PORT>/store/app/pages/<PAGE_NAME> https://<ES_HOST>:<ES_HTTPS_PORT>/store/app/pages/<PAGE_NAME>

Example:
Based on where you created the new page (i.e., Store or Publisher), you can access the page using one of the following URLs:

ES Component	URL
Store	`http://localhost:9763/store/app/pages/help https://localhost:9443/store/app/pages/help`
Publisher	`http://localhost:9763/publisher/app/pages/help` `https://localhost:9443/publisher/app/pages/help`

Create customized partials (.hbs files) based on your requirement, and add them in the respective partials directory (e.g., help_body.hbs). The partials directory, of the Publisher and Store app extension are as follows:

ES Component	Directory
Publisher	`<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/<APP_EXTENSION_NAME>/themes/default/partials`
Store	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/<APP_EXTENSION_NAME>/themes/store/partials`

Customize the renderer based on your requirements.
Example:
The following code snippet shows how to define a new partial named list-assets:

var render = function(theme, data, meta, require) {
    theme('single-col-fluid', {
        listassets: [{
            partial: 'help_body',
            context: data
        }]
    });
};

Refresh the page to reflect the changes.

Adding a new global page with a new view

Follow the instructions below to add a new global page, without the existing ES rendering framework:

For more information on app extensions, see Introduction to App Extensions.

Create the shell of an app extension. For more information, see Creating the Shell of an App Extension.

Define the new page in the app.server callback method of the app.js file in the Publisher or Store, based on your customization requirements. When defining the page, map it to a URL pattern and a controller. The app.js files of the Publisher and Store app extension are as follows:

ES Component	File Path
Publisher	`<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/<APP_EXTENSION_NAME>/app.js`
Store	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/<APP_EXTENSION_NAME>/app.js`

Example:
The following code snippet explains how a new page named servicex-owners, which is defined in the servicex_owners.jag file, is defined.

app.server = function(ctx) {
    return {
        endpoints: {
            pages: [{
                title: 'Servicex Owners',
                url: 'servicex-owners',
                path: 'servicex_owners.jag'
            }]
        }
    }
};

Add a controller, which is a .jag file, in the pages directory. ES uses the controller to serve the page. The pages directory of the Publisher and Store app extension are as follows:

ES Component	Directory
Publisher	`<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/<APP_EXTENSION_NAME>/pages`
Store	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/<APP_EXTENSION_NAME>/pages`

Example:
The following screenshot shows how the controller (servicex_owners.jag) is added to the servicex_storefront app extension, to serve the new page.

Restart the ES server, so that ES evaluates the changes in the app.js file.
Thereafter, access the respective ES console and navigate to the newly created page.

If the page exists in the Publisher:http://<ES_HOST>:<ES_HTTP_PORT>/publisher/pages/<PAGE_NAME>
https://<ES_HOST>:<ES_HTTPS_PORT>/publisher/pages/<PAGE_NAME>
If the page exists in the Store:http://<ES_HOST>:<ES_HTTP_PORT>/store/pages/<PAGE_NAME>
https://<ES_HOST>:<ES_HTTPS_PORT>/store/pages/<PAGE_NAME>

Example:

You can access the page using one of the following URLs based on where you created the new page (i.e., Store or Publisher):

ES Component	URL
Store	`http://localhost:9763/store/pages/servicex-ownershttps://localhost:9443/store/pages/servicex-owners`
Publisher	`http://localhost:9763/publisher/pages/servicex-owners` `https://localhost:9443/publisher/pages/servicex-owners`