This is a migrated thread and some comments may be shown as answers.

[Solved] Kendo UI Mobile SPA start page and templates with Router

1 Answer 257 Views

SPA

This is a migrated thread and some comments may be shown as answers.

Dan asked on 08 Apr 2015, 03:38 PM

I have been tasked with adding a Login page to a Kendo UI Mobile project. The Login page needs to appear first when the user opens the application. I also need to make this application an SPA application, using the router (or not using the router is easier).

Here is the existing index.html:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Global Client Dashboard</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<!--

<link rel="shortcut icon" href="images/favicon.png">

<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

-->

<link rel="stylesheet" href="css/main.css">

<link href="js/libs/kendoui/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="js/libs/kendoui/js/jquery.min.js"></script>

<script src="js/libs/kendoui/js/angular.min.js"></script>

<script src="js/libs/kendoui/js/kendo.all.min.js"></script>

<script src="js/app.js"></script>

</head>

<body style="display:none;" kendo-mobile-application k-hash-bang="true" ng-app="gcdApp">

<kendo-mobile-view id="accounts" k-title="'Customer Accounts'" k-layout="'default'" ng-controller="AccountsController">

<kendo-mobile-list-view id="accountslist" class="item-list"

k-template="templates.accountsTemplate" k-data-source="gcdAccounts.accountsDataSource">

</kendo-mobile-list-view>

</kendo-mobile-view>

<kendo-mobile-view id="metrics" k-transition="'slide'" k-title="'Historical Performance'" k-layout="'default'" ng-controller="MetricsController" k-on-show="setCurrentItem(kendoEvent)">

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<kendo-mobile-back-button k-align="'left'">Accounts</kendo-mobile-back-button>

<kendo-view-title>Historical Performance</kendo-view-title>

</kendo-mobile-nav-bar>

</kendo-mobile-header>

<kendo-mobile-content>

<h2>{{gcdAccounts.currentItem.custname}}</h2>

<div style="margin-left:5px;">

<div kendo-chart class="chart-halfwidth chart-left-top"

k-title="{ text: 'Client Experience Metric - Transaction' }"

k-legend="{ position: 'bottom' }"

k-series-defaults="{ type: 'column', stack: true, categoryField: 'month', labels: {visible: false} }"

k-series="[

{ field: 'q2avg', name: 'Avg', color: 'green' },

{ field: 'miss', name: 'Miss', color: 'red' }

]"

k-value-axis="{ min:0, max:10, plotBands: [{ from: 8.0, to: 8.05, color: 'black' }] }"

k-category-axis="{ labels:{ visible:true } }"

k-data-source="cexpDataSource"

k-series-click="transactionClicked" >

</div>

<div style="margin-left:5px;">

<div kendo-chart class="chart-halfwidth chart-right-top"

k-title="{ text: 'HW Billing Accuracy' }"

k-legend="{ position: 'bottom' }"

k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"

k-series="[

{ field: 'okcnt', name: 'Make', color: 'green' },

{ field: 'defects', name: 'Miss', color: 'red' }

]"

k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"

k-category-axis="{ labels:{ visible:true } }"

k-data-source="hwbillDataSource">

</div>

<div style="margin-left:5px;">

<div kendo-chart class="chart-halfwidth chart-left"

k-title="{ text: 'Dispute Cycle Time' }"

k-legend="{ position: 'bottom' }"

k-series-defaults="{ type: 'column', categoryField: 'month', labels: {visible: false} }"

k-series="[

{ field: 'cycletime', name: 'Cycle Time', color: 'green' }

]"

k-value-axis="{ min:0, max:60, plotBands: [{ from: 30, to: 30.3, color: 'black' }] }"

k-category-axis="{ labels:{ visible:true } }"

k-data-source="dctDataSource">

</div>

<div style="margin-left:5px;">

<div kendo-chart class="chart-halfwidth chart-right"

k-title="{ text: 'On Time Delivery' }"

k-legend="{ position: 'bottom' }"

k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"

k-series="[

{ field: 'okcnt', name: 'Make', color: 'green' },

{ field: 'defects', name: 'Miss', color: 'red' }

]"

k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"

k-category-axis="{ labels:{ visible:true } }"

k-data-source="otdDataSource">

</div>

<div style="margin-left:5px;">

<div kendo-chart class="chart-halfwidth chart-left"

k-title="{ text: 'Services Billing Accuracy' }"

k-legend="{ position: 'bottom' }"

k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"

k-series="[

{ field: 'okcnt', name: 'Make', color: 'green' },

{ field: 'defects', name: 'Miss', color: 'red' }

]"

k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"

k-category-axis="{ labels:{ visible:true } }"

k-data-source="svcbillDataSource">

</div>

</kendo-mobile-content>

</kendo-mobile-view>

<kendo-mobile-layout k-id="'default'">

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<kendo-view-title></kendo-view-title>

<!--                    <kendo-mobile-button class="about-button" k-align="'right'" href="views/about.html">About</kendo-mobile-button> -->

</kendo-mobile-nav-bar>

</kendo-mobile-header>

<kendo-mobile-footer>

<kendo-mobile-tab-strip>

<a href="#!accounts" data-icon="home">Home</a>

<a href="views/about.html" data-icon="info">About</a>

<a href="#!" data-icon="more">More</a>

</kendo-mobile-tab-strip>

</kendo-mobile-footer>

</kendo-mobile-layout>

<script id="accountsTemplate" type="text/x-kendo-template">

<a class="details-link" data-role="listview-link" href="\#!metrics?id={{dataItem.id}}">

{{ dataItem.custname }}

</a>

</script>

<script src="js/initOptions.js"></script>

<script src="js/main.js"></script>

<script src="js/messages.js"></script>

<script type="text/javascript">

WL.Logger.debug("Loading main page");

</script>

<script src="js/controllers/controllers.js"></script>

<script src="js/controllers/accounts.js"></script>

<script src="js/controllers/metrics.js"></script>

</body>

</html>

I have a few questions:

1. What determines, in the above .html, the first page/view that will appear?

2. How do I add an existing login.html into this page?

3. If I am to use the router, how to I add this feature to the existing index.html? Does each view become a template and how would I do that?

4. Once the login page is authenticated/passes, how do I open the Accounts view? Does this need to be put into a router or not?

I have been reviewing examples online, but I don't see samples on how to accomplish what I need to do.

Thanks!
Dan

1 Answer, 1 is accepted

answered on 10 Apr 2015, 12:24 PM

Hi,

- the view which will be displayed initially is the first view in the markup. You may control this with the mobile application initial configuration option.

- the mobile application supports the concept of remote views.

- the mobile application instance automatically instantiates its router instance and uses it to navigate across views. You don't have to do anything about that. More information is available in the following help article.

Regards,
Petyo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!