wso2frontendapi-manager

change the UI of the WSO2 API Manager v3.0.0

I want to change the UI of the wso2 API manager.

I use product-am v3.0.0, carbon-apimgt v6.5.349, and nexus. I'm add a <h4></h4> tag in /carbon-apimgt-6.5.349/features/apimgt/org.wso2.carbon.apimgt.store.feature/src/main/resources/devportal/source/src/app/components/AnonymousView/SignUp.jsx and the change the font size in defaultheme.js file.

I change the default repository to myrepo.com and added configuration below:

<distributionManagement>
        <repository>
            <id>nexus</id>
            <name>nexus-mixed</name>
            <url>http://myrepo.com/repository/nexus-mixed/</url>
        </repository>
</distributionManagement>

then run the mvn clean deploy command.

but when build in product-am and run only font size changed and <h4></h4> tag not added.

issue in GitHub: this

Solution

  • dh

    API Manager 3.x UIs has two levels of customizations, in the basic level, You can change the UI themeing via defaulttheme.js file, which does not require to re-build the web app to make the changes effect. The limitation in this method is, You can only change the theming parameters which are pre-defined in the theme file. But still, there are quite a lot of theming capabilities in it. The defaultTheme.js file in API Manager 3.0.0 is an extension of the Material-UI default theme file, Hence you can apply any customization which is allowed in material-ui theme structure.

    In the second level customization or advanced customization, you can customize the behavior of the web app by overriding the React JS implementation. We have developed a webpack plugin to override the default React component implementation with extended or custom implementation when the user decided to add customization to their app. You can find the documentation for this advance customization here.

    And also please note:

    Modified the default React component implementation in the web apps are not recommended. By doing so it will be difficult to update the server through wso2 update manager (WUM), So that our recommendation is to use any of the above customization methods to customize the web apps according to your need.