Basic UI building block


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.


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;
export class CustomerListView {
customerList: ko.Observable<Customer>;
this.customerList = ko.observable<Customer>([
{name: 'customer1', email:'[email protected]', revenue: 123.00},
{name: 'customer2', email:'[email protected]', revenue: 74.00},
{name: 'customer3', email:'[email protected]', 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)
<div class="page">
<!-- Top Toolbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Customers</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>
<!-- Page Content -->
<div class="page-content">
<div class="list media-list no-margin-top">
<ul data-bind="foreach: customerList">
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title" data-bind="text: $"></div>
<div class="item-subtitle" data-bind="text: $"></div>
Last modified 3yr ago