Step by step migration guide

From version 1 to version 2 step by step.
Updated: 13.04.2017 11:58

Change old APP plugin init code

Select all 
// Find top line:
this.AppBase(serviceUrl, viewsFolder, options); // Inherit from AppBase

// Change to:
$.fn.YourAppPlugin = function (serviceUrl, viewsFolder, options) { // <-- Constructor method
    var $app = this.smartapp2(serviceUrl, viewsFolder, options);
    // .........
}

// Move it to the top of your APP plugin init code as a good standard practice

As a best practice don't use "$me" in the APP plugin

Use the $app variable instead. Rename all of these.

Remove any location (hashchange) handling in your app

This must now be rewritten with routes. See next step.

Register all views, controls and dialogs in your APP plugin

Select all 
// See examples:
var $app = this.smartapp2(serviceUrl, viewsFolder, options);
$app.createView("Admin/ListEdit"); //+*", $app.Fetch("Admin/ListEdit.html"), $app.RunPlugin("AdminListEdit"));
$app.createView("A", $app.fetch("Admin/Log.html"), $app.runPlugin("AdminLog"));
$app.createControl("Admin/Menu");
$app.createView("AG", $app.fetch("Admin/Usage.html"), $app.runPlugin("AdminUsage"));
$app.createView("Admin/Users");
$app.createView("About");
$app.createDialog("Account");

// ..........

Remove all ViewBase() calls in all your VIEW plugins

Select all 
// Remove this line in all JS files:
this.ViewBase($app); // Inherit viewbase class

// Nothing new to add, this is now automatically executed in v2

Rewrite all your APP and VIEW plugins Initialize calls

Select all 
// Change this:
this.Initialize = function () { // <----------- Change TO:
    // ... old code
}

// To this:
this.on("appinit", function () {
    this.$base.Initialize(); // <----  REMOVE THIS LINE!
    // ... old code ...
});
// OR
this.on("viewinit", function () {
    // ... old code ...
});
// OR
this.on("dialoginit", function () {
    // ... old code ...
});
// OR
this.on("controlinit", function ($me) {
    // ... old code ...
});


// REMOVE:
this.Initialize(); // <----  REMOVE THIS LINE!

Add the $app.run() statement in your APP plugin

Select all 
// Remove this:
this.Initialize();

// Add this:
$app.run();

Change "data-subnav" and "data-nav" usage to <a> links

Refactor all "OpenSubView" and "OpenView" calls

Select all 
// Change to:
document.location = "...";

Rewrite your login code to use a dialog

This is the recommended practice.

Redesign your "Retry" page

These must be implemented as a dialog view in smartapp v2.

Replace all "OpenDialogView(...)" calls with "openDialog(...)"

Select all 
// OLD CODE:
var $v = $app.OpenDialogView("PostList");
$v.LoadWorkItem(wid);

// NEW CODE:
$app.openDialog("PostList").done(function ($v) {
    $v.LoadWorkItem(wid);
});

Change RetryViewName to RetryDialogName

You must also implement this as a dialog, as smartapp only supports a dialog here. (Not using a dialog does not make sense.)

Rewrite all this.RestoreView = function / this.SuspendView functions

NOTE: When using back the viewrestored is not triggered. It is only triggered when returning from a dialog.
Select all 
// FROM:
this.RestoreView = function() {
    this.$base.RestoreView(); //<----- REMOVE!
 // ......
};

// TO:
this.on("viewrestored", function() {
 // ......   
});

// And the same for SuspendView.

Refactor overwriting of APIGet and APIPost

Do this right before $app.run(); in your APP plugin as a standard practice:
Select all 
// ........
this.APIGet = function(controller, method, data, opts) {
    // ... your version here...
}

this.APIPost = function(controller, method, data, opts) {
    // ... your version here...
}

$app.run();
return this; // Return this jquery control
This is normally done to add authentication cookies etc.

Implement "LoadItem" functions that are automatically called on * routes

Make sure your code works with this.
Select all 
// Example for a route "Project+*"
// #/Project+123   <--- loads item 123
this.LoadItem = function (item) {
    $project.val(item).trigger("change");
    startid = item;
};

Remove all unneccessary "RegisterHistory" calls

Search for "RegisterHistory" and remove all registerHistory calls just adding the route.
Select all 
// Rename to registerHistory
$app.RegisterHistory("..."); // <---- RENAME case

// Is now:
$app.registerHistory("..."); // <---- RENAME case
Do NOT remove registerHistory calls that include choices made by the user, such as:
Select all 
// This changes the URL to what item is shown and not just the route of the URL
this.LoadDocument = function (id) {
    $app.registerHistory("#/Faktura/Rediger+" + id, ""); 
};

Fix casing for ReplaceHistory calls

Select all 
$app.ReplaceHistory(/*...*/);

// Is now:

$app.replaceHistory(/*...*/);

Add code to save and load username / token etc:

Select all 
// These functions are gone:
$app.login;
$app.token;
$app.SetLogin = function (l, t) { /* ... */ };
$app.ClearLogin = function () { /* ... */ };
$app.UpdateToken = function (t) { /* ... */ };

// You need to implement this yourself in your own code.

Change all "$app.GoBack()" calls

Search for "GoBack":
Select all 
// Use the browser history:
history.back();

// Or navigate to a specific view:
document.location = "#/Welcome";

Change case "$app.GetCurrentView()" to "$app.getCurrentView()"

Search and replace

A lot of methods have changed to different names and casing.
Old name New name
$app.ShowLoading $app.showLoading
$app.HideLoading $app.hideLoading
$app.GetCurrentView $app.getCurrentView
this.RestoreView this.on("viewrestored")
this.SuspendView this.on("viewsuspended")
this.Close this.on("viewclosing")
this.on("viewclosed")
this.Show this.on("viewshowing")
this.on("viewshowed")
CloseModal(); closeDialog();

Remove all usage of ".$base..." in your code

Search for "$base"

Change all $me.Control("Xyz"). AND $me.Field("Xyz") to $me.Xyz.

Select all 
// Example
$me.Control("Field1").hide();
$me.Field("Field2").hide();

// Change to
$me.Field1.hide();
$me.Field2.hide();