The portal apps play a significant role in designing and publishing APIs for API developers and enabling API consumers to discover and consume APIs. WSO2 API Manager 3.0 comes with complete portals conforming to a Single Page Application architecture using ReactJS. This architectural change brings lots of advantages, such as the modernized JS dependency system (NPM), improved packaging and build system (Webpack), and many more. These technologies allowed us to build versatile yet easily customizable portals. This deck will explore the architectural changes in the new portal applications and how you could customize them to facilitate your custom requirements. Discussion topics include: - First level theming support to change many common issues without any hassle - Advanced customization - Theming for tenants Watch the webinar on-demand here: https://wso2.com/library/webinars/2019/11/beautifying-the-beautiful-theming-wso2-api-manager/

1. Beautifying the Beautiful: Theming
WSO2 API Manager
Chanaka Jayasena, Technical Lead, WSO2
Kasun Thennakoon, Associate Technical Lead, WSO2

2. Agenda
● Basic Theming
○ How its work
○ Demo
○ Theming for Tenants
● Advanced customizations
○ How its work
○ Demo

3. Basic Theming

4. Single Page Application
Single page application developed with React echo system.

5. We Use React Material Design library
React Components that Implement
Google's Material Design.

6. Base of the theme
defaultTheme.js
palette: {
primary: {
main: '#15b8cf',
. . . .
}
},
typography: {
fontFamily: '"Open Sans", "Helvetica", "Arial", sans-serif',
fontSize: 12,
}

7. Developer Portal Artifacts Location
Devportal web application artifacts can be located from
<API-M_HOME>/repository/deployment/server/jaggeryapps/devportal/

8. Basic Theming Prerequisite
JSON

9. What we can do with defaultTheme.js
• Change the default api listing
• Styling the logo and header
• Styling API details left menu
• Making the page layout fluid
• Styling API details info section
• Enable or disable home page
• Enable or disable tag cloud
• Enable or disable rating
• Enabling or disabling api detail tabs
• Enable or disable banner
• Changing the footer

10. Demo

11. Theming for Tenants
We can upload custom theme for tenants via the admin portal.

12. Demo

13. Advanced customizations

14. Overriding Default Implementation
• Similar to sub themes in API Manager 2.x ,But more flexible
• Advantages
– Write tests for customizations/extensions
– Validate against ESLint rules
– Limit is the REST API
• Need to get the Developer portal source code
• Requires a development setup
– Node.js >= 8.12.0 NPM >= 5.7.0

15. How it works!
{
test: /.(js|jsx)$/,
exclude: /node_modules/ ,
use: [
{
loader: 'babel-loader' ,
},
{
loader: path.resolve('loader.js '),
},
],
},
webpack.config.js
Directory structure

16. Demo

17. Things to note
• Match the relative path in override directory
• Use AppOverride alias in relative imports
• Use webpack alias for default components
– AppData
– AppComponents

18. Q & A

19. ● Download and try out: https://wso2.com/api-management/
● Slack Channel:
https://app.slack.com/client/TLVKGQN84/CLVKGR3BN
● GitHub: https://github.com/wso2/product-apim/issues

20. THANK YOU
wso2.com