Content Comparison

Welcome to Portal SDK. This document is intended to familiarize you with the HTML, Javascript and Server Script components of the SDK.

...

Server script has same syntax as normal JS, but with few modifications and additions. Server Script is a term used by the Portal team to denote JavaScript used for database and server interactions; it should not be confused as a separate programming language.

When you pass arguments to the Server Script, don't put parameters into function signatures. They are available as args.Get("ArgName"):

...

$scope.portalHelpers.invokeServerFunction({uniqueNameId:'YOUR_UNQIUE_WIDGET_NAME_ID', functionName:'consoleTest'}).then(function (result) {
    console.log('console test', result);
});

...

 $scope.portalHelpers.invokeServerFunction({uniqueNameId:'YOUR_UNQIUE_WIDGET_NAME_ID', functionName:'myFunction'}).then(function(debug){
    console.log(debug);
});

...

When the project is first created, your javascript will be preset with necessary code required to run the example. You can notice several major sections: controller, factory, directive and filter. First two sections, controller and factory are unique per project. The other two, directive and filter can exist in multiples.

Why Angular

Two way data binding

Two way data binding in Angular refers to the co-existence and relationship between the model and view. In short, any changes you make to variables in JavaScript (model) will be reflected in the HTML (view) files instantly, and vice-versa. $scope, which you will see soon, allows for variables to be accessed in HTML.

Controller and Service

The purpose of the controller is to contain all code required for the user to interact with the widget such as click actions and watch expressions. The idea here is to place only the code that is specific to the widget view into the controller, whilst placing any reusable logic, such as data manipulation into the service. This allows to create multiple controllers that use the same service. While currently unavailable in SDK (but coming soon!), this will allow you to create nowlets (small components that appear on your home screen and show a small bit of your widget) as well as to create "widget APIs" where other widgets could load your service/directives and use them in their own widget. The diagram below shows how widgets share their code with nowlets.

...

console.log(homeSettings.user);console.log(homeSettings.user);

Note: The browser console can be accessed by right clicking anywhere on the page containing your widget code, and clicking on "Inspect". The console should be one of the tabs on the top of the corresponding window. 

Managing Private Data

The Portal SDK uses GitHub API integration to manage code. Do not store any private data in your source code, such as API keys or passwords because your source code will be uploaded to GitHub and become publicly available. You can store your private information in the database.

...

$scope.portalHelpers.invokeServerFunction({uniqueNameId:'YOUR_UNQIUE_WIDGET_NAME_ID', functionName: 'privDataRead'}).then(function(result) {
    console.log('priv read result', result);
});

...

$scope.portalHelpers.invokeServerFunction({uniqueNameId:'YOUR_UNQIUE_WIDGET_NAME_ID', functionName: 'clearPrivData'}).then(function (result) {
    console.log('priv clear result', result);
});

...

$scope.portalHelpers.invokeServerFunction({uniqueNameId:'YOUR_UNQIUE_WIDGET_NAME_ID', functionName : 'privDataWrite'}).then(function (result) {
    console.log('priv write result', result);
});

...

Note: You will see this menu option only when you’re in Test mode or in production, not in widget preview

If you would like to customize the options that appear in this menu, first create a template that will be placed into the menu. Here, you can add any additional syntax needed to control your menu:

<script type="text/ng-template" id="widgetMenu.html">
    <li ng-if="loggedIn">
        <a ng-click="logout()">
            Logout
        </a>
    </li>
</script>

...