Question

I’m extremely new to Rally development so my question may sound dumb (but couldn’t find how to do it from rally’s help or from previous posts here) 🙂

I’ve started from the rally freeform grid example – my purpose is to implement a Business Value calculator: I fill the score field with a 5-digit figure where each number is a score in the 1-5 range.
Then I compute a business value as the result of a calculation, where each number is weighted by a preset weight.
I can sort my stories by Business Value to help me prioritize my backlog: that’s the first step, and it works.

Now what I want to do is to make my freeform grid editable: I am extracting each of my digits as a separate column, but those columns are display-only. How can I turn them into something editable? What I want to do of course is update back the score field based on the values input in each custom column.

Here’s an example:
I have a record with score “15254”, which means Business Value criteria 1 scores 1 out of 5, Business Value criteria 2 scores 5 out of 5, and so on…
In the end my Business Value is computed as “1*1 + 5*2 + 2*3 + 5*4 + 4*5 = 57”.
So far this is the part that works.
Now let’s say I found that the third criteria should not score 2 but 3, I want to be able to edit the value in the corresponding column and have my score field updated to “15354”, and my Business Value to display 60 instead of 57.

Here is my current code, I’ll be really grateful if you can help me with turning that grid into something editable 🙂

<!--Include SDK-->
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p2/sdk-debug.js"></script>

<!--App code-->
<script type="text/javascript">

    Rally.onReady(function() {

        Ext.define('BVApp', {
            extend: 'Rally.app.App',
            componentCls: 'app',

            launch: function() {
            Ext.create('Rally.data.WsapiDataStore', {
                    model: 'UserStory',
                    autoLoad: true,
                    listeners: {
                        load: this._onDataLoaded,
                        scope: this
                    }
                });
            },

            _onDataLoaded: function(store, data) {
                var records = [];
                var li_score;
                var li_bv1, li_bv2, li_bv3, li_bv4, li_bv5, li_bvtotal;
                var weights = new Array(1, 2, 3, 4, 5);

                Ext.Array.each(data, function(record) {
                    //Let's fetch score and compute the business values...
                    li_score = record.get('Score');
                    if (li_score) {
                        li_bv1 = li_score.toString().substring(0,1);
                        li_bv2 = li_score.toString().substring(1,2);
                        li_bv3 = li_score.toString().substring(2,3);
                        li_bv4 = li_score.toString().substring(3,4);
                        li_bv5 = li_score.toString().substring(4,5);
                        li_bvtotal =
                            li_bv1*weights[0] +
                            li_bv2*weights[1] +
                            li_bv3*weights[2] +
                            li_bv4*weights[3] +
                            li_bv5*weights[4];
                    }
                    records.push({
                        FormattedID: record.get('FormattedID'),
                        ref: record.get('_ref'),
                        Name: record.get('Name'),
                        Score: record.get('Score'),
                        Bv1: li_bv1,
                        Bv2: li_bv2,
                        Bv3: li_bv3,
                        Bv4: li_bv4,
                        Bv5: li_bv5,
                        BvTotal: li_bvtotal
                    });
                });

                this.add({
                    xtype: 'rallygrid',
                    store: Ext.create('Rally.data.custom.Store', {
                        data: records,
                        pageSize: 5
                    }),
                    columnCfgs: [
                        {
                            text: 'FormattedID', dataIndex: 'FormattedID'
                        },
                        {
                            text: 'ref', dataIndex: 'ref'
                        },
                        {
                            text: 'Name', dataIndex: 'Name', flex: 1
                        },
                        {
                            text: 'Score', dataIndex: 'Score'
                        },
                        {
                            text: 'BusVal 1', dataIndex: 'Bv1'
                        },
                        {
                            text: 'BusVal 2', dataIndex: 'Bv2'
                        },
                        {
                            text: 'BusVal 3', dataIndex: 'Bv3'
                        },
                        {
                            text: 'BusVal 4', dataIndex: 'Bv4'
                        },
                        {
                            text: 'BusVal 5', dataIndex: 'Bv5'
                        },
                        {
                            text: 'BusVal Total', dataIndex: 'BvTotal'
                        }
                    ]
                });
            }
        });

        Rally.launchApp('BVApp', {
            name: 'Business Values App'
        });

                var exampleHtml = '<div id="example-intro"><h1>Business Values App</h1>' +
                '<div>Own sample app for Business Values</div>' +
                                '</div>';

                // Default app viewport uses layout: 'fit',
                // so we need to insert a container into the viewport
                var viewport = Ext.ComponentQuery.query('viewport')[0];
                var appComponent = viewport.items.getAt(0);
                var viewportContainerItems = [{
                    html: exampleHtml,
                    border: 0
                }];

                //hide advanced cardboard live previews in examples for now

                    viewportContainerItems.push({
                        xtype: 'container',
                        items: [appComponent]
                    });


                viewport.remove(appComponent, false);
                viewport.add({
                    xtype: 'container',
                    layout: 'vbox',
                    items: viewportContainerItems
                });
    });


</script>

<!--App styles-->
<style type="text/css">
    .app {
        /* Add app styles here */
    }
</style>

Answer 1

Like Kyle said in his comment, your best bet is to extend the user story model instead of using an in-memory store.

To extend it, you can use the Rally.data.ModelFactory to get the model and then do something like this:

Rally.data.ModelFactory.getModel({
    type: 'user story',
    success: function(model){
        this.CustomModel = Ext.define('BVModel', {
            extend: model,
            fields: [
                {name: 'Bv1'}
                ...
            ]
        });
    },
    scope: this
});

And then use the convert config on the Score field to set the values of your calculated fields. To get the Score set on an edit you might also need a convert config on each calculated field too.

And then tell the grid to use your custom model instead of a store:

this.add({
    xtype: 'rallygrid',
    model: this.CustomModel,
    columnCfgs: [
        {
            text: 'FormattedID', dataIndex: 'FormattedID'
        },
        {
            text: 'ref', dataIndex: 'ref'
        },
        {
            text: 'Name', dataIndex: 'Name', flex: 1
        },
        {
            text: 'Score', dataIndex: 'Score'
        },
        {
            text: 'BusVal 1', dataIndex: 'Bv1'
        },
        {
            text: 'BusVal 2', dataIndex: 'Bv2'
        }
    ]
});