Identifying Partials

In WSO2 ES, there are pages that are specific to a specific asset type and also there are global pages that affect all the asset types. The following sections explain how you can identify the partials that correspond to the page that you wish to override:

Identifying an asset type specific partial

Follow the instructions below to identify an asset type specific partial:

1. Navigate to the page that possesses the partial that you want to edit.
2. Identify the name of the corresponding renderer. 
   For example, if you wish to edit a partial in the My Bookmarks page and if the URL is as follows, then the name of the corresponding renderer is my-items.
   https://localhost:9443/store/pages/my-items 

3. Navigate to the directory that WSO2 ES uses to maintain the page renderer. This varies based on whether the page is in the Store or the Publisher. The renderers for the Store and Publisher are available in the following directory paths:

   WSO2 ES Component	Directory
   Publisher	<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/default/renderers/pages
   Store	<ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/renderers/pages

4. Identify the renderer that corresponds to the page. The name of the renderer is always identical to the name of the page (e.g., The renderer that corresponds to the my-items page is my-items.js). 

5. Identify the partials that you wish to override. You can find all the partials that WSO2 ES uses to render the specific page defined in the renderer.
   Example:
   The following code snippet is from the my-items.js file. 

   var render = function(theme, data, meta, require) {
       var navigation = 'navigation';
       var navigationContext = data;
       switch (data.assetTypeCount) {
           case 1:
               navigation = 'navigation-single';
               break;
           default:
               break;
       }
       theme('2-column-right', {
           title: data.meta.title,
           header: [{
               partial: 'header',
               context: data
           }],
           navigation: [{
               partial: navigation,
               context: navigationContext
           }],
           body: [{
               partial: 'my_items',
               context: data
           }],
           right: [{
                   partial: 'recent-assets',
                   context: data
               }
               // {
               //     partial: 'tags',
               //     context: data.tags
               // }
           ]
       });
   };

   Based on the above code snippet, you can see that WSO2 ES uses the following partials within my-items.js renderer to render the my-items page.

   Page Location	Rendered Partial
   header	header
   navigation	navigation
   body	my_items
   right	recent-assets

6. Locate the .hbs file with the partial definition related to the page that you wish to override. The location of the partial varies based on whether the page is in the Store or the Publisher. The partials for the Store and Publisher are available in the following directory paths:

   WSO2 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

7. Optionally, if the selected partial is made up of a set of child partials, locate the child partial in the latter mentioned partials directory. For more information on how to identify a nested partial see, Identifying a nested partial.

Identifying an app specific partial

Follow the instructions below to identify an app specific partial, which is not dependent on an asset type:

1. Navigate to the page that possesses the partial that you want to edit.
2. Identify the name of the corresponding renderer. 
   For example, if you wish to edit a partial in the Advanced Search page and if the URL is as follows, then the name of the corresponding renderer is advanced-search.
   https://localhost:9443/store/pages/advanced-search 

3. Navigate to the directory that WSO2 ES uses to maintain the page renderer. This varies based on whether the page is in the Store or the Publisher. The renderers for the Store and Publisher are available in the following directory paths:

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

4. Identify the renderer that corresponds to the page. The name of the renderer is always identical to the name of the page (e.g., The renderer that corresponds to the advanced-search page is advanced-search.js). 

5. Identify the partials that you wish to override. You can find all the partials that WSO2 ES uses to render the specific page defined in the renderer.
   Example:
   The following code snippet is from the advanced-search.js file. 

   var render = function(theme, data, meta, require) {
       theme('2-column-right', {
           title: 'Store | Advanced Search',
           header: [{
               partial: 'header',
               context: data
           }],
           navigation: [{
               partial: 'advance-search-navigation',
               context: data
           }],
           body: [{
               partial: 'advanced-search-body',
               context: data
           }]
       });
   };

   Based on the above code snippet, you can see that WSO2 ES uses the following partials within advanced-search.js renderer to render the advanced-search page.

   Page Location	Rendered Partial
   header	header
   navigation	advance-search-navigation
   body	advanced-search-body

6. Locate the .hbs file with the partial definition related to the page that you wish to override. The location of the partial varies based on whether the page is in the Store or the Publisher. The partials for the Store and Publisher are available in one of the following directory paths:

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

7. Optionally, if the selected partial is made up of a set of child partials, locate the child partial in the latter mentioned partials directory. For more information on how to identify a nested partial see, Identifying a nested partial.

Identifying a nested partial

The file that contains a partial definition has a .hbs file extension, such files are referred to as handlebar files, as they are written using Handlebars JS. Nested partials, also known as child partials, refer to partials that are called from within another partial definition. Partials are called within another partial definition by using the following partial call syntax:

{{> [CHILD_PARTIAL] }}

Example:

{{> myPartial }}

The above command renders the partial named myPartial. When the partial executes, WSO2 ES runs the child partial under the current execution context.

Therefore, you can easily identify nested partials or child partials within a partial by checking the partial definition for partial call syntaxes.