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:'', revenue: 123.00},
    {name: 'customer2', email:'', revenue: 74.00},
    {name: 'customer3', email:'', 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.

<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 updated

Dynamics Mobile provided by Mobile Affairs Ltd. | 1712 Sofia, Bulgaria, Alexander Malinov 51 |