Views

Basic UI building block

Overview

Views represents a piece of User interface , which has a well defined lifecycle.

Every app consists of Tasks, which organize the views in a user meaningful flow.

Each view is represented by:

  • view class

  • HTML layout

The view class defines the code to be executed during the view lifecycle.

The HTML layout defines what will be presented/rendered in front of the application user.

Example

So let's start by defining our goal:

we need to present a scrollable list of customers on the screen and allow the user to click over one of them.

Let's assume we are working on a mobile app - we will use mobile UI in this example ( the difference between a mobile and backend app is mostly in the HTML/CSS side).

So let's start with our view class, first.

import { View } from '@dms';
import * as ko from 'knockout';
//define a customer type here
type Customer = {
name: string;
email: stirng;
revenue: number;
}
@View
export class CustomerListView {
customerList: ko.Observable<Customer>;
constructor(){
this.customerList = ko.observable<Customer>([
{name: 'customer1', email:'cust1@somesrv.com', revenue: 123.00},
{name: 'customer2', email:'cust2@somesrv.com', revenue: 74.00},
{name: 'customer3', email:'cust3@somesrv.com', revenue: 345.00},
]);
}
}

So, we defined our view called CustomerListView. Our view is actually a simple class, which has a decorator @View. The @View decorator instructs Dynamics Mobile SDK that this class is a view. It means that this class may expose specific lifecycle methods. Let's keep it simple so far and just create our html content to define the UI.

Dynamics Mobile SDK comes with 2 embedded UI libraries:

So, the UI of the application may have two different layouts, depending on the actual application type that we are building.

Mobile UI (Framework7)
Backend UI ( Bootstrap)
Mobile UI (Framework7)

<div class="page">
<!-- Top Toolbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Customers</div>
</div>
</div>
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#"><i class="margin-left f7-icons" data-dms-task="Home">house</i></a>
</div>
</div>
<!-- Page Content -->
<div class="page-content">
<div class="list media-list no-margin-top">
<ul data-bind="foreach: customerList">
<li>
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title" data-bind="text: $data.name"></div>
</div>
<div class="item-subtitle" data-bind="text: $data.email"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>

Backend UI ( Bootstrap)