Overriding a Global Page

The Store and Publisher applications provides a set of predefined pages. These pages can vary between Store and Publisher. As a general rule of thumb, you can override any page in the default app extension pages directory. The following are the two ways in which you can override a page:

Partially overriding a global page

Follow the instructions below to partially override a globally accessible page, so that the existing view is maintained:

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.

Identify the page to override from the default set of pages, and create a copy of the respective .jag file. The default pages directory for the Publisher and Store are as follows:

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

Identify the app extension that exposes the page, and add a dependency using the app.dependencies property in the app.js file. Note that you can identify the app extension that corresponds to the selected page by scanning the app.js file of each app extension.
Example:
As the store_common extension exposes the advanced-search.jag page, it is added as a dependency in this app extension, so that this app extension gets higher precedence over it.
```
app.dependencies = ['store_common'];
```

Define the page that you wish to override in the app.server callback method in the app.js file. The app extension directory for the Publisher and Store 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:
You can override the advanced-search.jag page as follows:

app.dependencies = ['store_common'];
app.server = function(ctx) {
    return {
        endpoints: {
            pages: [{
                title: 'Servicex Advanced Search',
                url: 'advanced-search',
                path: 'advanced-search.jag'
            }]
        }
    }
};

Add an overriding controller, by adding the copied .jag file (e.g., advanced-search.jag) into the app extension pages directory. The name of the overriding controller must always be the same as the default controller. The pages directory of the Publisher and Store app extensions 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`

Optionally, edit the default renderer if required, as follows:

Make a copy of the default renderer (e.g., advanced-search.js) from the respective directory, based on whether you are overriding a page in the Publisher or Store. The renderers pages directory of the Publisher and Store are as follows:

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

Some default pages in the Publisher and Store common directory (i.e., publisher-common and store-common) do not have default renderers as they have not been added using the ES rendering framework.

Move the copy of the selected renderer to the app extension pages directory, based on your customization requirement. Note that the file structure in the renderers directory should mimic the path to the controller. In addition, the name of the customized renderer should have the same name as the default renderer (e.g., advanced-search.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	`advanced-search.jag`	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/servicex/pages`
Renderer	`advanced-search.js`	`<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/servicex/themes/default/renderers/pages`

Update the renderer in the app extension as required.

Optionally, edit the default partial if required, as follows:

Make a copy the default partial (.hbs files), which is being used by the renderer. These partials are found in the following directories:

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

Moved the copied partial to the app extension partials directory. The app extension partials directory for the Store and Publisher 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`

Update the partial in the app extension as required.

Refresh the page. Thereafter, you can navigate to the overridden 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 the page exists (i.e., Store or Publisher):
http://localhost:9763/store/pages/ advanced-search https://localhost:9443/store/pages/advanced-search

Completely overriding a global page

Follow the instructions below to completely override a globally accessible page:

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.

Identify the page to override (e.g., advanced-search.jag) from the default set of pages. The default pages directory for the Publisher and Store are as follows:

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

Identify the app extension that exposes the page, and add a dependency using the app.dependencies property in the app.js file. Note that you can identify the app extension that corresponds to the selected page by scanning the app.js file of each app extension.
Example:
As the store_common extension exposes the advanced-search.jag page, it is added as a dependency in this app extension, so that this app extension gets higher precedence over it.
```
app.dependencies = ['store_common'];
```

Define the page that you wish to override in the app.server callback method in the app.js file. The app extension directory for the Publisher and Store are as follows:

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

Example:
You can override the advanced-search.jag page as follows:

app.dependencies = ['store_common'];
app.server = function(ctx) {
    return {
        endpoints: {
            pages: [{
                title: 'Servicex Advanced Search',
                url: 'advanced-search',
                path: 'advanced-search.jag'
            }]
        }
    }
};

Add an overriding controller. The name of the overriding controller must always be the same as the default controller.

Create a blank .jag file with the identical name of the page that you identified to override in step 2 (e.g., advanced-search.jag).

Add the blank .jag into the app extension pages directory. The pages directory of the Publisher and Store app extensions 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`

Refresh the page. Thereafter, you can navigate to the overridden 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 the page exists (i.e., Store or Publisher):
http://localhost:9763/store/pages/advanced-search https://localhost:9443/store/pages/advanced-search