change the UI of the API Manager

[amir-dh]

I want to change the UI of the 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.

[tmkasun]

Hi @amir-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.

[amir-dh]

@tmkasun I read the documentation that you sent and I did according to that alright. after the copy and replace devportal folder and run the command of npm run build:dev. I added the Line console.log("ABCD") in the devportal/source/src/app/components/Login/Login.jsx file. but when run the product-am and I go to devportal login page, doesn't print this ABCD in console and not exist src/app/components/Login/Login.jsx file in the override directiory, only exist readme file

[tmkasun]

Hi @amir-dh ,

We no longer use devportal/source/src/app/components/Login/Login.jsx component in UI, In APIM 3.0.0 also , Even the file is there, it has no usage. Try overriding a component like source/src/app/components/Apis/Apis.jsx.

Note:

If you need to override a default implementation, You need to add a new component source into the override directory with the same relative path that the original component has from the source directory. DO NOT change the original source in <Developer Portal>/source directory.

Take a copy of the original source and put it inside the override directory and add a console.log line in the overriding source. Then run the npm run build:dev command to build the app including the overriding source.

[amir-dh]

hi @tmkasun I solved the problem. I change the source of devportal in carbon-apimgt and run the command of npm run build:prod. copy and replace it $CARBON-APIMGT/site/public on $PRODUCT-APIM/repositrory/deployment/server/jaggeryapps/devportal/site/public and refresh the page. but I want to make APIM multi-language. I read a this document, but this documentation for AM version 2.6.

[amir-dh]

hi @tmkasun I solved the problem. I change the source of devportal in carbon-apimgt and run the command of npm run build:prod. copy and replace it $CARBON-APIMGT/site/public on $PRODUCT-APIM/repositrory/deployment/server/jaggeryapps/devportal/site/public and refresh the page. but I want to make APIM multi-language. I read a this document, but this documentation for AM version 2.6.

@tmkasun I'm sorry I forget to mention this note. one of those languages is RTL.

[tmkasun]

@amir-dh

You can follow this wiki for more information about i18n in APIM 3.0.0

[amir-dh]

@tmkasun I went like the wiki you sent for me when adding ar.josn file and change the browser language to Arabic not changed the API manager language. but I go to developer portal source code and change the default message from No APIs Available to ABCD and it changed in the developer portal.