Create a dashboard using oe-studio

What you’ll Build

Working on a Sample Application which has oe-studio as bower dependency you will

  • create a dashboard using studio
  • create a navigation link for the dashboard page using studio
  • create a route for the dashboard page using studio

What you’ll Need

  • Familiarity with oeClod.io
  • Basic understanding of UIComponents,Routes and Navigation Links
  • Basic understanding of HTML,CSS,JavaScript
  • The sample application with studio which you can get following steps mentioned here

How to complete this guide

By the end of this guide, using data from loan-application model and other related models of cassi bank, we will create an admin dashboard, a route and a navigation link.

Run the application using node . and open http://localhost:3000/ in your browser. Login in as an admin, credentials are

username : john
password : Edge@2017$

Navigate to http://localhost:3000/designer. You should see the screen as below:

Start Page

Click on the uidesigner icon i.e., the bottom left second icon, you will be navigated to uidesigner mode. You should see the screen as below:

UIDesigner Page

Using uidesigner of oe-studio, it is possible to create either a static page or a polymer element. You can add a route and a navigation link to thus create page/element with few simple clicks in the designer.

In this guide we will build a static page, which will serve as a dashboard.

Select Create/Manage Components, as shown image,

Create Page

Select Static Page

Static Page

Add a new component

Add Component

Add the details like name of the page

Add Details

Let us choose a blank form for our dashboard as a template:

Choose Template

Dashboard page looks as below

New Dashboard

Now let us drag and drop components, to achieve the dashboard as below

End Page

Adding Data table component to the dashboard

Data Table is an ui component from oeCloud.io. The bare minimunm data to populate the table are data-controller and config-code. To understand more about the data table follow the guides

Based on the RestURL specified in the data-controller and the model name mentioned in the config-code, the data table is populated.

For the guide, the values for data-controller and config-code are {“restUrl”:"/api/Products"} and Product respectively.

Search Data table in the designer and drag and drop the table into the container

Adding datatable1

After drag and drop, the screen looks as below.

Adding datatable2

Click on the settings icon as shown in the image, to configure the properties of the table

Adding datatable3

Add values to the properties to achieve a table as shown below

Adding datatable4

Adding Widget container

Widget Containers are the draggable and expandable sections of the page. Let us use these to add charts to the dash boards.

The final layout, with the widget containers should look as below

Final Layout

Choose the widget container icon in the designer as shown in the image. Drag and drop the same into the page widget container

You can delete and expand the widgets. Do the necessary to achieve the layout as show in the above image.

Configure Layout

Adding Labels to the graphs in dashboard

Before adding graphs into the widget containers, let us label the graph. Steps for one label creation is shown. Try out rest on your own:

Search for oe-info in the designer and drag and drop the component into the first widget container

Adding label1

oe-info has a label property and value property, apart from other properties. Let us add our graph description to the value proerty of the oe-info.

For the first one the description is added as Region wise analysis of applications.

Adding label2

Similarly add the labels for other containers as shown in the below image.

Adding label3

** Do not forget to save the changes. **

Adding Graphs to the dashboard

oe-charts is an ui component that is developed in polymer and offered by oeCloud.io. oe-charts supports varied types of charts that suits majority of the business needs. In this guide, we will be using

*Column graph for a scenario , to analyse the region wise applications for the bank across years *line graph for a scenario to analyse the yearly growth in terms of the number of applications *GroupedColumn graph for a scenario understand quarterly report on the number of applications for each type

In this guide, the sample data for all the three graphs is provided, while only one has detailed explanation.Try out the other two graphs on own

Search for oe-charts in ui designer

Adding graphs1

drag and drop the same into the widget container

Adding graphs2

Let us configure the properties to achieve the graph as shown in the below image:

category :appUser.profile.region
chart-type:column
data-url:/api/LoanApplications?filter=%7B%22include%22%3A%7B%22appUser%22%3A%22profile%22%7D%7D
inherit-parent-dimension : true
series :[{"property":"id","name":"Loan Applications","aggregation":"count","color":"green"}]

Adding graphs3

In the previous scenario the series data contains an aggregation function, but if data provided is already formatted no need of providing any aggregation function. Example : Suppose we have formatted data as below :

data : [{
            country: 'China',
            appls: 1066702
        }, {
            country: 'India',
            appls: 1005600
        }, {
            country: 'United States',
            appls: 1503498
        }]

Then setting the following properties will achieve a graph as shown in the below image.

category : country
chart-type : column
inherit-parent-dimension : true
series : [{"property":"appls","name":"Loan Applications","color":"green"}]
data : [{
            country: 'China',
            appls: 1066702
        }, {
            country: 'India',
            appls: 1005600
        }, {
            country: 'United States',
            appls: 1503498
        }]

Formatted Chart

Data for other two graphs are :

category :_createdOn
category-aggregator:year
chart-type:line
data-url:/api/LoanApplications
inherit-parent-dimension : true
series :[{"property":"id","name":"Loan Applications","aggregation":"count","color":"green"}]
category :_createdOn
category-aggregator:quarter
category-format :Q- 
chart-type:groupedColumn
data-url:api/LoanApplications?filter[where][_createdOn][gte]=%222017-01-01%22
inherit-parent-dimension : true
series :[{"property":"type","filter":"PERSONAL_LOAN","name":"PERSONAL_LOAN","aggregation":"count","color":"orange"},{"property":"type","filter":"HOME_LOAN","name":"HOME_LOAN","color":"blue","aggregation":"count"},{"property":"type","aggregation":"count","filter":"CAR_LOAN","name":"CAR_LOAN","color":"yellow"}]
  • Category represents the x-axis of the graph. It can be any property of the Model.

  • category-aggregator is more useful in the scenarios like date as category. Date has an year,month and day. So the x-axis can be either one of them or a different one altogether. This can be specified in category-aggregator

  • category-format specifies the prefix to the x-axis label

  • chart-type specifies the type of chart the data has to be represented in

  • data-url specifies the datasource for the graph

  • inherit-parent-dimension when set to true, the graph takes the size of the parent container,else will be of fixed dimensions.

  • series represents the y-axis of the chart. It is an array and can take may series. property of the series represents the property of the model , on which the data analysis is being done. aggregation defines, if the data in the property has to be counted/added.filter specifies a filter with in the same data with which we can generate multiple series.color gives the desired color to the chart.Value specified in the name appears as a label in the graph.

After adding the graphs, our page looks as below:

Before Style

In the previous scenario the data from the url is filtered on client side using the filter property of the series object. However in certain cases we may need to get the data for each series from a seperate URL. The previous chart can be generated by providing different dataUrl inside the series object to perform server side filtering.

category :_createdOn
category-aggregator:quarter
category-format :Q- 
chart-type:groupedColumn
inherit-parent-dimension : true
series :[{"property":"type","dataUrl":"api/LoanApplications?filter[where][_createdOn][gte]=%222017-01-01%22&&filter[where][type]=%22PERSONAL_LOAN%22","name":"PERSONAL_LOAN","aggregation":"count","color":"orange"},{"property":"type","dataUrl":"api/LoanApplications?filter[where][_createdOn][gte]=%222017-01-01%22&&filter[where][type]=%22HOME_LOAN%22","name":"HOME_LOAN","color":"blue","aggregation":"count"},{"property":"type","aggregation":"count",""dataUrl":"api/LoanApplications?filter[where][_createdOn][gte]=%222017-01-01%22&&filter[where][type]=%22CAR_LOAN%22","name":"CAR_LOAN","color":"yellow"}]

Adding Additional Styles to the dashboard

We can add additional properties to an ui-component of the designer, apart from the common properties.

For example, let us try to add a style property to the charts that makes our dashboard more beautiful. One example is shown, follow the same to achieve the final design as below

After Style

Choose oe-charts, as shown in the below image, you can add attributes, let us add property

style

and value

border: solid 2px;

Adding Style1

After adding style, the page looks as below.Add the same to other charts to achieve the above design

Adding Style2

Code View of oe-studio

oe-studio offers you to view the design in both , design view and code view. To modify in code view , you can always click on the icon as shown in the below image to achieve the code-view.

Code View

Configuring route for the page developed

Let us now configure the route and navigation for the page that is designed in oe-studio.

Configure Route

In our application

Navigate to localhost:3000

Application Start

Click on the menu i.e, to left top corner.Click on dashborad and you will navigate to dashboard page.

End Page

Summary

Oe-studio is a powerful tool to Create a page,its routewith less or no coding