Customizing the API Store & Publisher in WSO2 API Manager
1. Last Updated: Jan. 2014
Lalaji Sureshika & Joseph Fonseka
Customizing the API
Store & Publisher
WSO2 API Manager Team
2. **
About the Presenters
๏ Joseph joined WSO2 in September 2013. He is a Senior
Tech Lead in the WSO2 API Manager team where he
focuses on improving the UX of the API Manager. In
addition to his product development efforts he is also
a contributor to the Sahana and OpenEvsys open-
source projects. He is also a FOSS advocate.
๏ Lalaji joined WSO2 in September 2010. She is a senior
software engineer in the WSO2 API Manager team
where her main focus is on the development of the
product. In addition to her product development
efforts she has provided development support and
technology consulting on customer engagements,
including customer QuickStart programs.
3. *
About WSO2
*
๏ Global enterprise, founded in
2005 by acknowledged leaders in
XML, web services technologies,
standards and open source
๏ Provides only open source
platform-as-a-service for private,
public and hybrid cloud
deployments
๏ All WSO2 products are 100% open
source and released under the
Apache License Version 2.0.
๏ Is an Active Member of OASIS,
Cloud Security Alliance, OSGi
Alliance, AMQP Working Group,
OpenID Foundation and W3C.
๏ Driven by Innovation
๏ Launched first open source API
Management solution in 2012
๏ Launched App Factory in 2Q 2013
๏ Launched Enterprise Store and
first open source Mobile solution
in 4Q 2013
5. *
Agenda
๏ Introduction to WSO2 API Manager
๏ Dive in to API Store
๏ Customizing API Store & Publisher
๏ Localization
๏ Sample Customizations
๏ Future
6. *
Introduction
๏ WSO2 API Manager is a complete solution for publishing and
managing APIs.
๏ It comes with an out of the box API Store which allows you to
publish and advertise your APIs.
๏ You can easily customize the API Store to reflect your company's
brand.
๏ Also you can add targeted content to the store and use it to
build a developer community under your brand name.
http://wso2.com/products/api-manager/
9. *
Dive in to API Store
๏ Where to find the API Store
{API Manager}/repository/deployment/server/jaggeryapps/store
๏ API Store is built on Jaggery
A framework to write web-apps and HTTP-focused web services for
all aspects of the application: front-end, communication, Server-
side logic and persistence in pure Javascript
http://jaggeryjs.org/
10. *
Dive in to API Store
๏ API Store Directory Structure
11. *
Dive in to API Store
๏ API Store Directory Structure
jaggery.conf -This file specifies the application specific
configurations. It has used to define the URL-mappings for the
pages, define welcome page,security-constraints,etc.
Templates- Contains views of the web-application. A template can
be considered as a re-usable UI block.
Blocks-This can be considered as the Controller part of the web
app. User actions on each View(template) are sent to the relevant
block and then it handle the incoming HTTP requests.
12. *
Dive in to API Store
๏ API Store Directory Structure
Modules- Can be considered as the 'Model' of the application. It
handles the state of the application.Contains references to all the
functions plugged through the java modules in to Store app..
Jagg -This directory is for handling all functionalities to control and
manage interactions among the modules,blocks and templates of
the jaggery application APIStore/Publisher.
14. *
Customizing APIStore
๏ Changing the brand
○ Changing the banner
○ Changing the background colors
○ Changing the footer
๏ Create a new jaggery theme.
○ Changing the page layout
๏ Adding new Content.
○ Adding a new page
15. *
Changing the Banner
๏ To change the banner image Locate logo.png from
“store/site/themes/fancy/images” and replace it.
๏ To change the banner height and color find “styles-layout.css” in
“store/themes/fancy/css” and change the relevant styles.
16. *
Changing Colors & Styles
๏ The store uses bootstrap css to style some of the components and
to structure the page layout.
๏ Additional styles are specified in “styles-application.css” and
“styles-layout.css” found inside “store/site/themes/fancy/css”
directory.
๏ Use the above mention style sheets to customize the colors.
๏ You can include a bootstrap theme to change the styles of
bootstrap components.
17. *
Changing the Footer
๏ The footer is located in
“store/site/themes/fancy/templates/page/base/template.jag”
file.
๏ Open the template file and find a div with “footer-main” class
name.
๏ Change the content of the above footer as required.
18. *
Creating a new theme
๏ API Store has Themes and Sub-themes which can be use to
customize page layout and styles.
๏ If you want to change the page layout you can create a new
theme, and if you only need to change colors and banners better
to use subthemes.
๏ Easiest way to create a theme is to duplicate an existing theme
and change the templates & styles.
๏ To apply the new theme change the theme property in “site.
json” under “site/conf/” directory and refresh the application.
19. *
Creating a new Page
๏ Create new jag file under “store/site/pages/” directory.
Ex : aboutus.jag
๏ Create a directory under “store/site/themes/fancy” with the
page name and create initializer.jag and template.jag inside it.
๏ Add page content to the template.
๏ Create a path to the page in store/jaggery.conf.
22. *
Customizing API Publisher
๏ API Publisher is a Jaggery application located in -
{API Manager}/repository/deployment/server/jaggeryapps/publisher
๏ You can use the same methods used to customize the API Store to
customize API Publisher.
23. *
Internationalization Support
๏ Jaggery based String localization
Store/site/conf/locales/jaggery/locale_{locale-code}.json
http://jaggeryjs.org/apidocs/i18n.jag
๏ Client side Javascript based String localization
Store/site/conf/locales/js/i18nResources.json
http://i18next.com/
https://docs.wso2.org/display/AM160/Internationalization+and+Localization
27. *
Future
๏ Custom themes per tenants
๏ API Usage Statistics on Store
๏ Move the Store/Publisher to adhere to Caramel Framework built
on Jaggery
http://wso2.github.io/caramel
