This document summarizes a WSO2 API Manager community call about customizing API Manager React portals. It discusses simple and advanced customization methods, the React portals structure and theming, and how to customize the login page and developer portal through white labeling. The agenda includes an overview of customization methods, the React structure, theming, white labeling the login page and portal, and a demo. There will be an open discussion and the next session is scheduled for September 3rd.

1. WSO2 API Manager Community Call
August 20, 2020
Session 14
Customizing API Manager React Portals

2. Hello!
Kasun Thennakoon
Associate Technical Lead
kasunte@wso2.com

3. Agenda

4. ● Customizing API Manager React portals
⦿ Customization methods
⦾ Simple customization (Part 1)
⦾ Advanced customization (Part 2)
⦿ React portals structure
⦿ How theming works!
⦿ White labeling API portals
⦾ Customizing login page
⦾ Customizing developer portal
⦿ Demo
● Open discussion session
Agenda
4

5. Customization Methods

6. ● Simple customization (today’s session)
⦿ No coding
⦿ No bundling
⦿ No NodeJS or any development environment
⦿ Just configurations!
● Advanced customization (Part 2 3rd September, 2020)
⦿ More flexible
⦿ Can modify or add new components to React application
Customization methods
6

7. React Portals Structure and How
Theming Works!

8. Very Short Intro
A React app is a tree of Components
● A Component is a function that returns a special
data structure.
● Its arguments are called props. When a prop
changes, the function is re-called.
● Based on diff between old and new data structures,
parts of UI are re-rendered.
8

9. 9
defaultTheme.js

10. White Labeling API Portals

11. ● Customizing login page
⦿ The following sections in a web page are made extensible
⦾ Title
⦾ Header
⦾ Footer
⦾ Cookie Policy Content
⦾ Privacy Policy Content
● Customizing developer portal
⦿ Extension of material-UI theme
White labeling API portals
11
White Labeling API Portals

12. Demo

13. Question Time!

14. 14
Next Session
● Thursday, September 3, 2020
● Click on the community call page link to get notified of the next call or submit
your topic suggestions
⦿ Page - https://wso2.com/community/api-management/#CommunityCall
● You can join our ongoing conversations on WSO2 API Manager using the following
channels
⦿ Slack invites - apim-slack.wso2.com
⦿ Twitter - @wso2apimanager
⦿ Email - dev@wso2.org
● You can find out more about our product by visiting
⦿ YouTube - bit.do/wso2apimanager
⦿ Website - WSO2

15. Documentation Links
● Customizing Login Pages for Developer Portal and Publisher
● Overriding Developer Portal Theme
15

16. wso2.com
Thanks!