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

Follow the instructions below to change the default asset type icon to another WSO2 font icon the gadget asset type:

For more information on asset extensions, see Introduction to Asset Extensions.

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

  1. Create the shell of an asset extension for the gadget in the Store and Publisher. For more information, see Creating the Shell of an Asset Extension.

    The asset extension directory path for the Publisher and the Store are as follows:

    ES ComponentDirectory Path
    Publisher<ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/gadget
    Store<ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/gadget
  2. Identify the CSS class name of the icon that you wish to use to replace the existing asset type icon:

    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-gadget
  3. Create a copy of the default asset.js file, which is within the latter mentioned directories, and rename the file copy to asset_need.js in order to create a backup of the default configurations.

  4. Override asset type icon in the asset.js file by defining the CSS class name of the new icon 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:'fw fw-gadget'
                }
            }
        };
    };
  5. Restart the ES server.
  6. Verify whether you were able to change the asset type icon successfully in the Store.
    1. Access the Store via the following URL. https://localhost:9443/store
      You can now see the newly added asset type icon.
  7. Verify whether you were able to change the asset type icon successfully in the Publisher.
    1. Access the Publisher via the following URL.
      https://localhost:9443/publisher
    2. Sign into the Publisher using the default credentials, which is as follows: admin
    3. Click the asset type button.
      You can now see the newly added asset type icon.

If you wish to learn how to change all the default asset types to a WSO2 Font type globally in the Store and Publisher, see Globally Changing All the Default Asset Type Icons to a WSO2 Font Icon.

  • No labels