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

• Mobile Apps: Framework 7

• Backend Apps: Bootstrap and Dynamics Mobile specific controls.

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

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)