Simple Polling: a basic Polling Web App built using Oracle Visual Builder CS Visual Applications

Polls. Surveys. Live Voting. It’s all about gathering live responses in any venue: conferences, concerts, classrooms etc.. There’s a proliferation of tools (including online tools) to create and conduct polls: “Download the mobile app today and be ready for your next interactive class or event tomorrow“.

For those who don’t know the difference between a poll and a survey a poll is used to ask one simple question while a survey is generally used to ask a wide range of multiple questions. …  How tedious are those questions?

If the point is obtain information do we want to bother our attendees with 10 questions (that they are not likely to answer) or do we want to ask 1 small, simple and quick question?  Well, being an attendee myself I think polls are way more powerful and effective than surveys so I thought a simple responsive Polling Web App was a good excuse to put my hands on Visual Builder and get familiar with the Visual Applications. This post assumes you’re familiar with Visual Builder Cloud Service – if you’re not reading Carlos’ latest post Teaching How to Get Started with Oracle Visual Builder 2.0 is certainly a good idea.

What do we want to achieve?

A simple responsive Web Page that includes a rating gauge, a table of results and a nice chart – this should not take anymore than 15 mins to build. Why a web page and not a Mobile App? Because we don’t want the audience of your next event to download a Mobile App to rate – we want to give them a short URL that they can quickly access from their mobile browser in two seconds. What is important for you as the organization running the event is that your audience can interact with you real time and they can see instant results in an animated graph. Remember we need their feedback hence we should give them the right tool to provide it.

This slideshow requires JavaScript.

How can we achieve this?

The data – a quick tour of the Business Objects we need

Yes we do need two business objects to manage the data of the following database tables: UserRates (a new record is added any time a person rates the event from 1 to 4), Stats that just aggregates the data that we want to present through the donut chart (the second image below shows how to create a new aggregation, specifically we want to count the number of occurrences of each of the following values {1,2,3,4} ). There’s a many to one relationship between UserRates and Stats. See below.

 

Before moving on let me show you something very cool that VBCS does for you: when you create a business object the REST endpoints to do CRUD operations on the data are created for you. In other words whether the data are stored in a DB Table or they’re provided by a service you can access them via REST APIs anywhere from the UI. In our application when the user rates a POST /UserRates call is triggered, anyway don’t worry about it now we’ll get there in a bit.

The Web App – UI, Variables and Actions

The rating gauge

After we create the Business Objects we need to take care of the UI. We create the Web Application first and then switch to the Designer view to start editing the page: drag and drop the UI components from the left palette into your page and change the properties from the property inspector on the right side. If you’re a CSS/HTML developer switch to the Source view and go nuts 🙂

I’ve decided to use the Rating Gauge component to capture the user rate so let’s have a look at “Data” and “Events” properties tabs.

The selected value needs to be stored  in a page variable that we create from the Variables panel on the left hand side of the page. The wizard that allows you to create a new variable requires the var id and the type, what is the type of userRate variable? We need to create it from POST /UserRates endpoint – switch to “Types” tab and click “+ Type”, then select “From Endpoint”. The wizard allows you to select one of the endpoints that got created when we designed the Business Object. The number of stars we select (1,2,3,4) on the UI must be stored in the “rate” column of UserRate DB table – rate is a primitive field of a complex custom type that wraps the request of the POST call.

Once we’ve created the custom type from “UserRates” BO we need to create the variable “userRate” of type “create_UserRates” – the type will appear in the Page Types because it’s a variable that has Page scope.

This slideshow requires JavaScript.

Now that we’ve created the variable we need to bind it to the gauge component. The value set on the stars gauge (1,2,3,4) is saved in userRate.rate and because it’s a page variable it’s listed under the page.variables (below the expression language).

{{ $page.variables.userRate.rate }}

You can type your own expression language or you can simply use the wizard to find and select the variable.

What happens when the user selects 1 or 2 or 3 or 4 stars? A call to POST /UserRates is fired – so what we need to do next is design the Action Chain of the RatingGaugeValueAction in the Events tab of the UI Component.

When you select “+ New Event, Quick Start: ‘value'” VBCS loads the Action Chain designer which allows you to design the chain of actions that should be executed when that event occurs. In this example “on star selection” (RatingGaugeValueAction) we want to fire the following events in this exact order:

1. call the endpoint and add a new record into the UserRates table
2. show a notification message to the user (“Thanks for your feedback!” if the previous call was successful or an error message if something went wrong)
3. update the database table that shows the stats
4. update the Donut Chart

The last two events guarantee that data and chart are refreshed and the user is looking at the real-time statistics.

Let’s drill down the chain and inspect how to configure each Action.

Call REST Endpoint

The first action of the chain is “Call Rest Endpoint” to insert a new record into UserRates table. How do we configure it? On “Call Rest Endpoint” configuration panel we select the endpoint create_UserRates and then in the parameters section we assign userRate variable to the request body.

This slideshow requires JavaScript.

Fire Notification

For the simplicity of this demo I don’t check whether or not the call is successful – in a real scenario we will need to branch this flow into two sub flows: happy and unhappy scenarios. Depending on the outcome of the call we show a transient confirmation message (that will appear on top of the page) or an error message.

Fire Data Provider Event

Underneath the rating gauge the page displays the Stats table and a Donuts Chart. I’m sure you’re already familiar with how to add data to a table while you might have never used a Data Visualization component. So let’s quickly go through the configuration of the chart.

Once you’ve dropped the widget into the page the Chart editor allows you to map the chart to a data source. Click Add Data, it will open up the Add Data wizard: this chart reads data from Stats BO hence on page load VBCS needs to invoke the endpoint GET /Stats to retrieve the data. The next step of the wizard allows you to drag and drop fields to display in your chart: because we want to display the percentage of user rates grouped by description (each value corresponds to a different colour, eg “Very Good” green, “Good” red, etc….) we’ll assign total to Slice Values and rateDesc to Slice Colours. This specific call doesn’t have query params hence we’ll skip the third step of the wizard.

This slideshow requires JavaScript.

So this is how we add data to a pie chart, now let’s go back to the Fire Data Provider Event. How do we configure this action? After dragging and dropping the pie chart into your page a new page variable page.variables.pieChartData4 was added to the list of the page variables. This is the event we want to trigger to refresh the chart data. Similarly for the table component select the right data source variable:

{{ $page.variables.statsListServiceDataProvider }}

To test the web page simply click the Live button or run the app – the web page doesn’t take any input parameters.

Look forward to seeing your next Polling Web App and if you have any questions don’t hesitate to contact me. Until next post!