How to Customise (reskin) API Platform Developer Portal

Information is power and monetisation of data is a common theme in the corporate world today.  One of the common use-cases for the API Platform is to leverage corporate services and data and provide it to a broader internal and external development community.  Control is kept in-house through security, policies, throttling, etc, but it dramatically increases the pool of developers working with our services.

API Platform is a great tool for this, but if I’m going to expose services to a developer community, I don’t really want to have an Oracle branded developer portal exposed.

fortunately, rebranding the developer portal is as easy as one, two, three!

  1. Build a configuration file with customisations
  2. Run a curl command
  3. Have a coffee break

Ok… so it is as easy as one, two, but I like having a coffee break when I’m able!

The API Platform has three basic API services to customize the portal, get, set (post) and delete.  The documentation can be found here:

https://docs.oracle.com/en/cloud/paas/api-platform-cloud/apfrd/api-Developer%20Portal%20Configuration.html

The delete operation will remove all custom configurations, so this is an easy way to reset the portal in case you make a mistake.

curl http://mydevportal/apiplatform/developers/v1/customization/configuration -X DELETE --header "Content-Type: application/json" -u weblogic:welcome1

This gets things back to the default look and feel:

Selection_898.jpg


So first we need a configuration file.  It is fairly easy to build the json file following the documentation, but here is a sample: (config-cb.json)

{
 "branding": {
 "vendor": "Peanuts",
 "product": "Peanuts API Platform Services",
 "product_short": "Peanuts API Platform CS",
 "title": "Developer Portal",
 "logo": {
 "url": "http://www.iowacitycommunitytheatre.com/wp-content/uploads/Wp-charlie-brown-banner.png",
 "width": "auto",
 "height": "17px",
 "alignment": "baseline"
 },
 "login": {
 "logo": {
 "url": "https://upload.wikimedia.org/wikipedia/en/2/22/Charlie_Brown.png",
 "width": "185px",
 "height": "326px"
 },
 "splash": "",
 "productLogo": "http://www.stickpng.com/assets/images/5853c45aec0c270fc2f62df4.png",
 "background": {
 "desktop": "https://i.ytimg.com/vi/055wFyO6gag/maxresdefault.jpg",
 },
 "copyright": "Copyright © 2017 Schultz and/or its affiliates. All rights reserved."
 }
 },
 "css": {
 ".oap-login-product-title-1": {
 "font-family": "\"Comic Sans MS\",\"Comic Sans\",cursive",
 "color": "#FF0000"
 },
 ".oap-login-submit-button": {
 "text-indent": "-9999px",
 "line-height": "0",
 "background-color": "#ff0000"
 },
 ".oap-login-submit-button::after": {
 "content": "\"Kick Ball\"",
 "border": "5",
 "text-indent": "0",
 "display": "block",
 "line-height": "initial",
 "background-color": "#00ff00",
 "color": "#000000"
 }
 }
}

Note: There are many settings available for configuring things like graphics and logos.  If you want to make lots of changes, you are able to overide the CSS.  I used my browser’s inspect feature to see what to change in the CSS to update a few fonts and button colours.

Once the config file has been created, run a curl command to install it.

curl http://mydevportal/apiplatform/developers/v1/customization/configuration -X POST -d @config-cb.json --header "Content-Type: application/json" -u weblogic:
welcome1

Once this has executed, the login screen looks something like this:
Selection_900.jpg

My regards to Charles M. Schulz!

The portal can also be customised after login as well in the same way.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s