||
Skip to end of metadata
Go to start of metadata

Follow the instructions below to globally change all the default asset type icons to another WSO2 font icon:

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

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_ex. For more information, see Creating the Shell of an App Extension.

    The app extension 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
    Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/app/test_app_ex
  2. Identify the CSS class name of the icon that you wish to use to replace the existing asset type icons:

    1. Navigate to the WSO2 icon repository, which is available in the following location:
      http://wso2-dev-ux.github.io/font-wso2/icons.html
    2. Click on the preferred icon.
    3. Identify the CSS class name of the icon. For example, the CSS class name of the above icon named gadget is as follows: fw fw-jquery
  3. Create a asset.js file within the app extension and override asset type icon by defining the CSS class name of the new icon 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:'fw fw-jquery'
                }
            }
        };
    };
  4. Add a dependency to define this app extension as the default app extension, in the app.js file and save the file within the app extension. 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'];
  5. Comment out the default configurations related to asset extensions that have been added to customize the asset icon.

    By default, WSO2 ES 2.1.0 ships asset extensions to customize the asset icons for the gadget and site assets in the Store. Therefore, you need to comment-out such asset icon customizations in order for WSO2 ES to be able to apply the global customizations.

    Comment-out the icon and iconColor related configurations in the respective asset.js file, which are in the following locations, when asset-level icon-related customizations exist.

    • Publisher 
      • <ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/gadget/asset.js
      • <ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/site/asset.js
    • Store
      • <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/gadget/asset.js
      • <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/site/asset.js
  6. Restart the ES server.
  7. Verify whether you were able to change the asset type icon successfully in the Store.
    1. Sign into the Store.
      You can now see the newly added asset type icons.
  8. 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.

If you wish to learn how to change a specific default asset type to a WSO2 Font type in the Store and Publisher, see Changing the Default Asset Type Icon to a WSO2 Font Icon for a Specific Asset Type.

  • No labels