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 generat...
Post a Comment

Sentiment Analysis for Oracle APEX using client side JavaScript

If you have an interactive grid with any sort of review text a nice value add for the reviews is the addition of sentiment analysis.   This post will show you how to add a sentiment column of positive, negative or neutral and a score to your interactive grid using a couple of lines of code.


Demo app

This post is a quick front end value add of sentiment analysis to your app using client side JavaScript.  If this works for you I suggest using Oracle Text or some other sentiment analysis tool to do the sentiment analysis on the database rather than the front end as shown here.

We are using a client side JavaScript library compendium to do the sentiment analysis.  First download compendium.js from here and upload it to static application files in your APEX app.  Get the reference to the JS file, in my case #APP_IMAGES#compendium.js

Create a new page and include the JavaScript library.


Create a new IG region with the static ID ANSWERS_IG. Sample SQL for your interactive grid with 2 placeholder columns for the sentiment analysis, SENTIMENT to hold the text, positive, negative or neutral and SENTIMENT_VALUE to hold the score.


select 'Product 1' as product,
'Good, great, brilliant, superb' as product_review,
       'N/A' as SENTIMENT,
       'N/A' as SENTIMENT_VALUE from dual

union

select 'Product 2' as product,
'Bad, terrible, worst, hated it' as product_review,
       'N/A' as SENTIMENT,
       'N/A' as SENTIMENT_VALUE from dual

union

select 'Product 3' as product,
'OK, standard, not too bad' as product_review,
       'N/A' as SENTIMENT,
       'N/A' as SENTIMENT_VALUE from dual

union

select 'Product 4' as product,
'Worst product ever' as product_review,
       'N/A' as SENTIMENT,
       'N/A' as SENTIMENT_VALUE from dual


We will use JQuery to populate the sentiment columns, so give the columns PRODUCT_REVIEW, SENTIMENT and SENTIMENT_VALUE the same class names so JQuery can access the column text. An example is the PRODUCT_REVIEW column.


Add the following JS to execute when page loads.

$.each($('#ANSWERS_IG tbody tr'), function(i, item) {
     var responseCell = $(item).find('.PRODUCT_REVIEW');

     if (responseCell.text())
     {
        var sentiment = compendium.analyse(responseCell.text())[0];
        if (sentiment.profile.label == 'negative')
        {
           $(item).find('.SENTIMENT').html('<p style="color:red;font-size: 125%">'+sentiment.profile.label+'</p>');
        }
        else if (sentiment.profile.label == 'positive'){
           $(item).find('.SENTIMENT').html('<p style="color:green;font-size: 125%"">'+sentiment.profile.label+'</p>');
        }
        else
        {
           $(item).find('.SENTIMENT').html('<span>'+sentiment.profile.label+'</span>'); 
        } 
        $(item).find('.SENTIMENT_VALUE').text(sentiment.profile.sentiment.toFixed(3));
    }
});

The JQuery code loops round all the rows in your IG.  The analysis happens on this line where the text is passed to the JS code for analysis

var sentiment = compendium.analyse(responseCell.text())[0];

We are interested in the returned sentiment profile which you can view here,

Lastly I have added some styling to the sentiment which you can change to suit.

For example I want positive sentiment to show green with a larger font size.

$(item).find('.SENTIMENT').html('<p style="color:green;font-size: 125%"">'+sentiment.profile.label+'</p>');



Comments

Post a Comment

Popular posts from this blog

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

Image
In this post I will describe how to colour an Interactive Grid based on a column condition using CSS and JavaScript.  Using APEX Version 19.2. I want to colour every column red in my IG when the value is 'No'.   I have several IGs on my page I want to colour, so I set all my IGs that I want to colour with a CSS class of ATTENDEE_SCORE_IG in the Appearance section of the IG; Every column I want to colour in the IG I set the CSS Class to COLOUR_YES_NO (in this example I set this in 5 columns); I then created a Dynamic Action (DA) that contains the JavaScript that has the condition check that will colour the cells.  Because I have several IGs that are details of the master/detail relationship and these are refreshed by the user clicking on the master detail IG I have made my DA a Page Change [Interactive Grid].  If you don't need this you can set the DA on page load. The JS which will colour every column is this; ////////////////////////////////////////////////////...
Read more

Oracle APEX style an Interactive Grid cell conditionally based on the value of another cell using JavaScript and CSS

Image
This blog post describes how you can style an Interactive Grid cell conditionally based on the value of another cell using JQuery and CSS.  Using APEX Version 19.2. The requirement is to highlight the cell that has the highest value in the row; This can be achieved by setting the IG column CSS class and using JQuery to loop round the table rows to conditionally set CSS style based on cell values First give all your columns a CSS Class (note you can give columns multiple classes separated with space) in this case all 4 columns are set with CSS class SCORE_C_1, SCORE_C_2, SCORE_C3 and SCORE_C_4 in the column Appearance; We now add the JavaScript in Execute when page loads (preferably put this is a JS file). We are using the JQuery $.each() method to fetch every table row;  $.each($('tbody tr'), function(i, item) {} and the JQuery text() method to get the column value from the row using the column CSS class names;         var scoreC1 = $(item).find('.SCOR...
Read more

Add a timeline diagram chart to your APEX app - Part 2 of the HighChart Series

Image
How to add a timeline diagram chart to your APEX app using HighCharts and JQuery.  This is the second in the series of blog posts showing you how to add HighCharts to your APEX application. Demo I have been using HighCharts in my web apps for a number of years and in my opinion its the best charting JavaScript library out there, its free to use for non-commercial use, robust, well documented, mobile friendly and a great addition to your APEX app.   I work for the University of Glasgow and the next project I am starting is an APEX project where staff members apply for academic promotion. There are many stages to the application process, manager approval, board of review, college review, etc.  A timeline diagram displaying the process to the users will be ideal.  This is how I will do it. As an aside, for American readers  this   is a fascinating story I have recently learned about the University.  James McCune Smith born a slave and the first Afric...
Read more