WSO2 API Manager Community Call
August 20, 2020
Session 14
Customizing API Manager React Portals
Hello!
Kasun Thennakoon
Associate Technical Lead
kasunte@wso2.com
Agenda
● 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
Customization Methods
● 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
React Portals Structure and How
Theming Works!
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
defaultTheme.js
White Labeling API Portals
● 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
Demo
Question Time!
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
Documentation Links
● Customizing Login Pages for Developer Portal and Publisher
● Overriding Developer Portal Theme
15
wso2.com
Thanks!

Wso2 api manager community call#14

  • 1.
    WSO2 API ManagerCommunity Call August 20, 2020 Session 14 Customizing API Manager React Portals
  • 2.
  • 3.
  • 4.
    ● Customizing APIManager 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.
  • 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 Structureand How Theming Works!
  • 8.
    Very Short Intro AReact 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.
  • 10.
  • 11.
    ● Customizing loginpage ⦿ 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.
  • 13.
  • 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 ● CustomizingLogin Pages for Developer Portal and Publisher ● Overriding Developer Portal Theme 15
  • 16.

Editor's Notes

  • #10 So the webpack externals provides a way of excluding dependencies from the output bundles. and Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment. We use this feature to inject dependencies at the application runtime.
  • #12 https://apim.docs.wso2.com/en/next/develop/customizations/customizing-login-pages-for-dev-portal-and-publisher/#customizing-login-pages-for-developer-portal-and-publisher
  • #13 Recap
  • #14 Open Discussion Session