How to set AppSDK2 app's context to a something other than global context

Products

• Rally On-Premise
• Rally SaaS

Issue/Introduction

How to set AppSDK2 app's context to a something other than global context?

Environment

Release:
Component: ACPREM

Resolution

This article discusses 3 different contexts:

1. Global page context
2. App context
3. Store context

Global context is set in Rally UI in the project picker in the upper left corner. Per Context guide global page context is by default the same as the app context, but may be different if the app is explicitly scoped to a specific project.

A custom app example below shows how to explicitly overwrite global scope. The app builds a grid of user stories last updated in 30 days. The stories are filtered by project selected from the app's project picker, and not from the global project picker.

The most relevant parts of the code are as following:

a) creating a new context object, initializing it to the project selected in the project picker, and setting app's context to it:
?

var newContext = Ext.create(Rally.app.Context, {
            initialValues: {
                project: this._getProjectFilter()
            }
        });   
this.setContext(newContext);

b) setting grid's store config:
?

context:{
      project: this.getContext().getProject(),
      projectScopeDown: true  //true is default and can be omitted
}

Notice that the stories from the child projects of the currently selected project in the app's project picker are also displayed.

Next, we change the selection in the app's project picker. That selection has nothing to do with the currently selected project in the global project picker. The data store reloaded with stories from the newly selected project.To show the independence of the app's project picker and app's data from the selection in the global project picker we change the globally selected project. The app still displays the same data even though globally we switched from Earth to Jupiter:

The full java script code is below, and the deployment HTML is attached. For information on how to install a custom app in a custom page from the deployment html see:
Deploy a Rally Catalog or Custom app from HTML source

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    launch: function() {
        var panel = Ext.create('Ext.panel.Panel',{
            items:[
                {
                    xtype: 'rallyprojectpicker',
                    fieldLabel: 'select project',
                    itemId:'proj',
                    margin: 10,
                    workspace:  this.getContext().getWorkspace()._ref, //limit choices to the current workspace
                    value: this.getContext().getProject(),
                    listeners:{
                        change: this._onProjectSelected,
                        scope: this
                    }
                },
                {
                    xtype: 'container',
                    itemId: 'gridContainer'
                } 
            ]
        });
        this.add(panel);
    },
    _onProjectSelected: function() {
        var millisecondsInDay = 86400000;
        var lookback = 30;
        var startDate = (new Date(new Date() - millisecondsInDay*lookback)).toISOString();
        
        var newContext = Ext.create(Rally.app.Context, {
            initialValues: {
                project: this._getProjectFilter()
            }
        });
        
        this.setContext(newContext);

        
        if (this.down('rallygrid')) {
            Ext.ComponentQuery.query('#gridContainer')[0].remove(Ext.ComponentQuery.query('#storyGrid')[0], true);
        }
        
        this.down('#gridContainer').add({
            xtype: 'rallygrid',
            itemId: 'storyGrid',
            columnCfgs: [
                'FormattedID',
                'Name',
                'Project'
            ],
            context: this.getContext(),
            storeConfig: {
                model: 'userstory',
                filters: [
                    {
                        property: 'LastUpdateDate',
                        operator: '>',
                        value: startDate
                    }      
                ],
                context:{
                    project: this.getContext().getProject(),
                    projectScopeDown: true  //true is default and can be omitted
                }
            }
        });
    },
     _getProjectFilter: function() {
        return this.down('#proj').getValue();
    }
});

Attachments:

• App-uncompressed.html