Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beautifying the Beautiful: Theming WSO2 API Manager


Published on

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:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Beautifying the Beautiful: Theming WSO2 API Manager

  1. 1. Beautifying the Beautiful: Theming WSO2 API Manager Chanaka Jayasena, Technical Lead, WSO2 Kasun Thennakoon, Associate Technical Lead, WSO2
  2. 2. Agenda ● Basic Theming ○ How its work ○ Demo ○ Theming for Tenants ● Advanced customizations ○ How its work ○ Demo
  3. 3. Basic Theming
  4. 4. Single Page Application Single page application developed with React echo system.
  5. 5. We Use React Material Design library React Components that Implement Google's Material Design.
  6. 6. Base of the theme defaultTheme.js palette: { primary: { main: '#15b8cf', . . . . } }, typography: { fontFamily: '"Open Sans", "Helvetica", "Arial", sans-serif', fontSize: 12, }
  7. 7. Developer Portal Artifacts Location Devportal web application artifacts can be located from <API-M_HOME>/repository/deployment/server/jaggeryapps/devportal/
  8. 8. Basic Theming Prerequisite JSON
  9. 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. 10. Demo
  11. 11. Theming for Tenants We can upload custom theme for tenants via the admin portal.
  12. 12. Demo
  13. 13. Advanced customizations
  14. 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. 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. 16. Demo
  17. 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. 18. Q & A
  19. 19. ● Download and try out: ● Slack Channel: ● GitHub:
  20. 20. THANK YOU