Designing Flows or Navigations

What you’ll Build

Working on an Sample Application which is added with dashboard page and Product form we will build a route design, to navigate from dashboard to Product form.

What you’ll Need

  • Familiarity with oeClod.io
  • Basic understanding of UIComponents,Routes and Navigation Links
  • Basic understanding of HTML,CSS,JavaScript
  • Get the sample application by following steps mentioned here
  • dashboard page and Product form

How to complete this guide

By the end of this guide, using dashboard screen and create-product screen we will design a route flow from dashboard to product form.

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/manage either a static page or a polymer element.

In this guide we will modify the previously created dashboard page,to understand how route designer works.

Select Create/Manage Components, as shown image:

Static Page

Choose the existing dashboard page.

Existing Dashboard

Modification to data table to add row actions and customise columns

Existing data table of the dashboard shows all the columns of the model . We will cutomize the same, using oe-studio and columns property of the data table.Below properties are set as columns for this guide.

[{"key":"type"},{"key":"label"},{"key":"rateOfInterest"},{"key":"currency"}]

Our idea is to navigate user to product form screen , when he clicks on the edit icon on a row in the data table which oe-cloud.io internally populates the details of the row on to the product screen.

Let us add row actions to the existing data table to achieve the same.The value for the rowActions property of the data table for this example is shown below.

[{"icon":"editor:mode-edit"," title":"edit","action":"edit"}]

After adding the above values, the data table looks as below:

Datatable AfterModification

On hover over a row in the data table, you will see an edit icon to the extreme right corner:

Edit icon

On click of this icon in the data table, the data table fires an event, oe-data-table-row-action-edit, we will use this event to navigate to the product form

** To know more about data table properties you can go through guides **

Adding a new Route using Model Designer

Let us add a new route, to achieve the route design we have planned for. Navigate to the model designer view

Model Designer

Choose, UIRoutes and navigate to the detailed view of UIRoute. Let us post a new route as below

Posting Data

{
  "type": "elem",
  "name": "create-product",
  "path": "/create-product/:id",
  "import": "/api/UIComponents/component/create-product",
  "group": "",
  "retainInstance": false
}

Posting Success

If you notice import: “/api/UIComponents/component/create-product”, we are using the same create product form that has been created earlier in one of the guides, but when looked in more detail the path : “create-product/:id”, :id is a placeholder and hence expects an Id value. Internally, the UIForm handler will handle these cases and populates, the fields of the form with details for that id.

Designing the flows

Now we have a route /dashboard and a newly created route /create-product/:id let us configure a design to navigate to /create-product/:id when the user clicks on edit icon in data table.

Navigate to route designer view

Route Designer

Choose /dashboard and a newly created route /create-product/:id

Choose Routes

Create the route from dashboard to product form. Add the details of the event on which the navigation has to happen, which in our case is oe-data-table-row-action-edit

Adding Event

Finally the design view looks as below

Final Design

Finally

Navigate to localhost:3000/dashboard

Dashboard Page

Hover over a row and select the edit icon

Product Page

Summary

Oe-studio is a powerful tool in designing the route flow with less or no coding