This documentation is for WSO2 ES version 2.0.0. View documentation for the latest release.
Changing the Default Asset Type Icon to a Custom Icon - Enterprise Store 2.0.0 - WSO2 Documentation
||
Skip to end of metadata
Go to start of metadata

The following sections explain how you can change the default asset type icon to a custom asset type icon.

Changing the default asset type icon to a custom icon for a specific asset type

Follow the instructions below to change the default asset type icon to a custom asset type icon for a specific asset type:

For more information on asset extensions, see Introduction to Asset Extensions. In addition, as you need to use the ES rendering framework for this customization, see ES Rendering Framework.

If you wish you can execute this sample only for the Store or the Publisher.

  1. Create the shell of an asset extension in the Store and Publisher. For more information, see Creating the Shell of an Asset Extension.
  2. Create a file structure in the asset extension directory to mimic the path to the default css directory. The css directory path for the Publisher and the Store are as follows:

    ES ComponentDirectory Path
    Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/<ASSET_TYPE_NAME>/themes/default/css
    Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/<ASSET_TYPE_NAME>/themes/store/css
  3. Save the custom icon as logo.png in the respective img directory. The Publisher and the Store  img  directory are as follows:

    ES ComponentDirectory Path
    Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/<ASSET_TYPE_NAME>/themes/default/img
    Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/<ASSET_TYPE_NAME>/themes/store/img

    Make sure that your asset type icon dimensions are as follows: 75px width and 35px height.

  4. Create a CSS file by the name testcss.css with the following code. This CSS file defines the CSS class name and the custom icon.

    .icon.foo{
    	background: transparent url(../img/logo.png) no-repeat center;
    }
  5. Identify the helper that you need to use to override the default partial.

    1. Identify the default partial that you want to override in the partials directory. The partials directory path for the Publisher and the Store are as follows:

      ES ComponentDirectory Path
      Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/default/partials
      Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/partials
    2. Identify and make a copy of the corresponding helper that you need to override based on the selected partial. Note that the name of the helper needs to be identical to the default partial that WSO2 ES uses to render the respective UI element. The default helpers directory path for the Publisher and the Store are as follows:

      ES ComponentDirectory Path
      Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/default/helpers
      Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/helpers
    3. Add a helpers directory within the asset extension themes directory. The app extension helpers directory path for the Publisher and the Store are as follows:

      ES ComponentDirectory Path
      Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/asset/gadget/themes/default/helpers
      Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/asset/gadget/themes/store/helpers
    4. Move the copied helper file (.js file) into the latter mentioned asset extension helpers directory. 

  6. Update the helper file, which is within the asset extension, by defining the customized CSS file within it as follows. This is done so that ES picks up the customization defined in the newly defined CSS file.

    • Publisher
      Create a helper file named ribbon.js within the helpers directory in the Publisher, with the following code: 

      css:['testcss.css']

      After the above code is added the  ribbon.js file will look as follows:

      var resources = function(page,meta){
          return {
              js:['popover.js','delete-asset.js'],
              code: ['publisher.lifecycle.meta.hbs'],
      		css:['testcss.css']
          }
      }
    • Store

      1. Create a helper file named header.js within the helpers directory in the Store with the following code. Note that this helper overrides the partial, which renders the asset type icons in the gadget list page.

        css:['testcss.css']

        The completed header.js file looks as follows:

        var resources = function (page, meta) {
            return {
                template: 'header.hbs',
                css: ['testcss.css']
            };
        };


      2. Create a helper file named top_assets.js within the helpers directory in the Store with the following code. Note that this helper overrides the partial, which renders the asset type icons in the top-assets page.

        css:['testcss.css']

        The completed  top_assets.js file looks as follows:

        var resources = function (page, meta) {
            return {
                template: 'top-assets.hbs',
                js: ['asset-core.js', 'top-assets.js' ],
                css: ['top-assets.css','testcss.css']
            };
        };
  7. Override the default asset type icon with the new custom icon, by defining the CSS class name of the new custom icon, which is foo, in the asset.js file as follows. As you are trying to customize the asset type icon for the gadget asset type in the Store and Publisher, make sure to add this code in both asset.js files and save the file.

    asset.configure = function() {
        return {
            meta: {
                ui:{
                    icon:'foo'
                }
            }
        };
    };
  8. Restart the ES server.
  9. Verify whether you were able to change the asset type icon successfully in the Store.
    1. Sign into the Store.
    2. Click the asset type button.
      You can now see the newly added asset type icon.
  10. Verify whether you were able to change the asset type icon successfully in the Publisher.
    1. Sign into the Publisher.
    2. Click the asset type button.
      You can now see the newly added asset type icon.

       

Globally changing all the default asset type icons to a custom icon

Follow the instructions below to globally change all the default asset type icons to a custom icon:

For more information on app extensions, see Introduction to App Extensions. In addition, as you need to use the ES rendering framework for this customization, see ES Rendering Framework.

If you wish you can execute this sample only for the Store or the Publisher.

  1. Create the shell of an app extension in the Store and Publisher. Name the app extension test_app_exFor more information, see Creating the Shell of an App Extension.

  2. Create a file structure in the asset extension directory to mimic the path to the default css directory. The css directory path for the Publisher and the Store are as follows:

    ES ComponentFile Path
    Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/test_app_ex/themes/default/css
    Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/test_app_ex/themes/store/css
  3. Save the custom icon as logo.png in the respective  img  directory. The Publisher and the Store img directory are as follows:

    ES ComponentDirectory Path
    Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/test_app_ex/themes/default/img
    Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/test_app_ex/themes/store/img

    Make sure that your asset type icon dimensions are as follows: 75px width and 35px height.

  4. Add the .css file, which defines the CSS class name and custom icon, in the newly created css directory and save the CSS file as follows: testcss.css

    .icon.foo{
    	background: transparent url(../img/logo.png) no-repeat center;
    }
  5. Identify the helper that you need to use to override the default partial.

    1. Identify the default partial that you want to override in the partials directory. The partials directory path for the Publisher and the Store are as follows:

      ES ComponentDirectory Path
      Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/default/partials
      Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/partials
    2. Identify and make a copy of the corresponding helper that you need to override based on the selected partial. Note that the name of the helper needs to be identical to the default partial that ES uses to render the respective UI element. The helpers directory path for the Publisher and the Store are as follows:

      ES ComponentDirectory Path
      Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/default/helpers
      Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/helpers
    3. Add a helpers directory within the app extension themes directory. The app extension helpers directory path for the Publisher and the Store are as follows:

      ES ComponentDirectory Path
      Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/app/test_app_ex/themes/default/helpers
      Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/test_app_ex/themes/store/helpers
    4. Move the copied helper file (.js file) into the latter mentioned app extension helpers directory. 

  6. Update the helper file, which is within the app extension, by defining the CSS file within it as follows. This is done so that ES picks up the customization defined in the newly defined CSS file.

    • Publisher
      Create a helper file named ribbon.js within the helpers directory in the Publisher, with the following code:  

      css:['testcss.css']

      After the above code is added the ribbon.js file will look as follows:

      var resources = function(page,meta){
          return {
              js:['popover.js','delete-asset.js'],
              code: ['publisher.lifecycle.meta.hbs'],
      		css:['testcss.css']
          }
      }
    • Store

      • Create a helper file named header.js within the helpers directory in the Store with the following code. Note that this helper overrides the partial, which renders the asset type icons in the asset type list pages.

        css:['testcss.css']

        The completed header.js file looks as follows:

        var resources = function (page, meta) {
            return {
                template: 'header.hbs',
                css: ['testcss.css']
            };
        };


      • Create a helper file named top_assets.js within the helpers directory in the Store with the following code. Note that this helper overrides the partial, which renders the asset type icons in the top-assets page.

        css:['testcss.css']

        The completed top_assets.js file looks as follows:

        var resources = function (page, meta) {
            return {
                template: 'top-assets.hbs',
                js: ['asset-core.js', 'top-assets.js' ],
                css: ['top-assets.css','testcss.css']
            };
        };
  7. Create an asset.js file within the app extension and override the default asset type icon with the new custom icon, by defining the CSS class name the new custom icon, which is foo, in the asset.js file as follows. As you are trying to customize the asset type icon for all the asset types in the Store and Publisher, make sure to add this code in both asset.js files and save the file.

    asset.configure = function() {
        return {
            meta: {
                ui:{
                    icon:'foo'
                }
            }
        };
    };
  8. Add a dependency to define this app extension as the default app extension, in the app.js file and save the file. As you are trying to customize the asset type icon for all the asset types in the Store and Publisher, make sure to add this code in both app.js files.

    app.dependencies = ['default'];
  9. Restart the ES server.
  10. Verify whether you were able to change the asset type icon successfully in the Store.
    1. Sign into the Store.
    2. Click the asset type button.
      You can now see the newly added asset type icons.
  11. Verify whether you were able to change the asset type icon successfully in the Publisher.
    1. Sign into the Publisher.
    2. Click the asset type button.
      You can now see the newly added asset type icons.
  • No labels