Build beautiful and interactive API documentation for ORDS

Image
In this blog post, I will show you how to quickly build beautiful and interactive API documentation for your Oracle APEX REST data sources using  swagger hub . Using APEX v23.1. I downloaded the  titanic data set  and loaded them into tables in my APEX instance, created some authorized restful services and published them using swagger hub. You can create a free account on swagger hub.   Check out my titanic swagger hub here ; Press Authorize. Username REST, password Glasgow123! I won't go through creating RESTful services and just show you the four I created that sit on top of the titanic data set; The GET is a very simple SQL query;      select * from TITANIC_DATA_SET_NEW A handy tip is to add comments, as there will appear on swagger hub, making your API self documenting; Once you have created your modules, press the Generate Swagger Doc button; This will generate an open API for you.  Copy the API and paste it into swagger hub This will generate the documentation; As mentioned b

Oracle APEX Color Interactive Grid (IG) group header using CSS

 

This post describes how to colour a group header on an Interactive Grid.  Using Version 19.2 but this should work on all versions.

Groups are when you create a group and place columns into the group like this;

I want to colour the Research & Teaching Group header to be this;

Open the page containing the IG and open Developer tools in Chrome then click on the selector tool (arrow top left).

Click the region you header you want to style, in my case Research & Teaching UoFGS.  In developer tools right click on the selected element and copy the selector.


This gets copied;

#rgBenchmarkingIG_ig_grid_vc > div.a-GV-hdr.js-stickyWidget-toggle > div.a-GV-w-hdr > table > thead > tr:nth-child(1) > th:nth-child(2)

I dont only want to colour the selected column I want to colour the whole row, so I remove;

> th:nth-child(2)

and place the following CSS into inline CSS or preferably a CSS file;

#rgBenchmarkingIG_ig_grid_vc > div.a-GV-hdr.js-stickyWidget-toggle > div.a-GV-w-hdr > table > thead > tr:nth-child(1){

         background: #87CEEB!important;

The IG;


Now becomes this;









Comments

Popular posts from this blog

Oracle APEX Interactive Grid colour cells based on a condition using JavaScript and CSS

Oracle APEX pretty checkbox item plugin

Build beautiful and interactive API documentation for ORDS