Creating a screen

The UI part of a screen is implemented using a single HTML file (<screen_name>.tpl.html) or multiple HTML files. You can divide the screen UI into multiple sections and have partial HTMLs (<screen_partial>.tpl.html) for each section. This makes it easier to manage all the HTML code needed for the UI.

Routing configuration for the screen is registered in the <screen_name>.config.js file as shown in the following code snippet:

angular.module('store')
.config(['iscStateProvider', function (iscStateProvider) {
    iscStateProvider.state('<state_name/screen_name>', 
    {
       templateUrl: '<Path to the HTML file>',
       controller: '<Name of the controller>',
       addToHistory: false | true,
        // when this attribute is set to true, it adds the state to history. 
        //By default, this is set to true.
       resourceId: '<resource_permission_id>' 
        //If a user has permission to a resource, only then the screen can be accessed by the user.					
            }) 
 }
]);

The logic for screen behavior is implemented using a controller. Instead of implementing the behavior logic as a normal javascript function, it is implemented as a prototype object, which helps in better code organization. The logic is split into multiple javascript code parts as described in the following table: Since the behavior logic is implemented as a prototype object, this object is termed as the control object. Therefore, you can use 'this' to access the control object attributes.

While writing the controller logic, ensure that you follow these steps:

1. Invoke mashups to fetch and persist data.
2. Define models to hold the data fetched by mashups.
3. Bind UI controls to the models.

Use iscScreen.initializeScreen($scope,{<implementation logic>}); to initialize screen behavior logic to the $scope object.

angular.module('store').controller(‘<name of the controller>’,
  [‘<dependency injection>’,
    function(‘<list of services in dependency injection above, 
    passed as paramerters to this function>’) {
  iscScreen.initializeScreen($scope,{ 
  /**
  *ModelList
  *Models that hold data
  **/
   model:{
       },
  /**
  *MashupRefs
  *Array containing the list of mashups referred in this controller
  */
  mashupRefs : [
                {
                  mashupRefId: mashupref1,
                  mashupId: mashupid1,
                  modelName : associated model                                
                }
            ],
  ui:{
  //list of UI attributes used in the business logic and UI painting
     },
            
  //Intiliazes the screen, by calling the required mashups
  
  initialize : function(){
                },
 
  //UI methods that can be accessed from html with ui as prefix           
    uimethod : function () {
          },
            
  //Helper methods
  helpMethod1:function(){
          },
 
  //Private methods start with _
  _privateMethod1:function(){
          }                               
    });        
    }
]);