Mobile UI

Defining user interface of mobile apps

Overview

Dynamics Mobile SDK allows the developer to create 2 types apps - mobile and backend.

Each of types two types of apps is meant to be rendered on the different types of screens and has different use case. Due to this , Dynamics Mobile SDK provides 2 different frameworks for building UI.

  1. Framework 7 for mobile apps

  2. Bootstrap for backend apps

The Mobile UI in Dynamics Mobile is based on Framework 7. Framework 7 is a state of art open source framework for building of beautiful and rich platform independent mobile UIs.

Dynamics Mobile CLI automatically installs Framework 7 in your folder, when you initialize your repository with dms init command.

Framework 7 , provides a rich set of ready UI widgets like textboxes, dropdowns, swipeouts, bottom bars, tabs, toggles and many more and comes with beautiful documentation. All of the Framework 7 widgets can be used in Dynamics Mobile Apps. Most of the UI components can be used just by dropping an html snippet in your view's html.

Dynamics Mobile View layout

Dynamics Mobile mobile apps initialized internally Framework7, so the typical view layout in Dynamics Mobile App follows:

<div class="page">
<!-- place here top bar, bottom bar, floating buttons, searchbars -->
<div class="page-content">
<!-- scrollable page content -->
<!-- place here the rest of the content - lists, forms, etc. -->
</div>
</div>

For example you can add few widgets in your vew like this:

<div class="page">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">My App</div>
</div>
</div>
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<!-- Toolbar links navigating to routes within the current task-->
<a href="#" class="link" data-dms-route="prior">Back</a>
<a href="#" class="link" data-dms-route="next">Next</a>
</div>
</div>
<div class="page-content">
<p>This is my first view </p>
<div class="block">
<div class="row">
<button class="col button button-fill">About</button>
<button class="col button button-fill">Contact</button>
<button class="col button button-fill button-round">Log out</button>
</div>
</div>
</div>
</div>

And this is the result:

Consult with Framework 7 documentation for more details.