Is there a way to implement a Defect Suite Popover within a Rally Grid that allows for viewing Defect Suites associated with a Defect? Currently, only the count of Defect Suites for a given Defect seems available.
This one took a little bit of tinkering, but here's what I came up with. I included the full app because there are a few moving parts. Basically this setup mirrors the way the other existing popovers are built (Defects, Tasks, etc.)
First we define a popover. I borrowed code from the TaskPopover as a starting point and then updated the parentProperty and childField configs near the bottom and changed the columns to be shown.
Next we define a status template to render the defect suite count in the grid. Again, I borrowed code from the TaskStatusTemplate as a starting point and just tweaked it a little bit to show the right data. There is some css at the bottom of the app to style it as well.
Finally, in the sample app included I add a grid of defects that all contain defect suites to test it. There are two little overrides at the beginning of the launch method to completely wire up the popover.
Hope that gets you started!
<!DOCTYPE html>
<html>
<head>
<title>DefectSuitePopover</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
//
//Define the popover
//
Ext.define('DefectSuitePopover', {
alias: 'widget.defectsuitepopover',
extend: 'Rally.ui.popover.ListViewPopover',
title: 'Defect Suites',
titleIconCls: 'icon-defect-suite',
width: 700,
constructor: function (config) {
config.listViewConfig = Ext.merge({
gridConfig: {
addNewConfig: {},
columnCfgs: [
{
dataIndex: 'FormattedID',
width: 90
},
{
dataIndex: 'Name',
flex: 1
},
{
dataIndex: 'Owner',
width: 90
},
{
dataIndex: 'ScheduleState',
width: 55
}
],
storeConfig: {
context: config.context
}
},
model: Ext.identityFn('DefectSuite'),
parentProperty: 'Defects',
childField: 'DefectSuites'
}, config.listViewConfig);
this.callParent(arguments);
}
});
//
//Define the status template for the grid to launch the popover
//
Ext.define('DefectSuitesStatusTemplate', {
extend: 'Rally.ui.renderer.template.status.StatusTemplate',
inheritableStatics: {
onClick: function(event, ref) {
Rally.ui.renderer.template.status.StatusTemplate.onClick(event, ref, {
field: 'DefectSuite',
target: event.target,
targetSelector: 'a.id-' + Rally.util.Ref.getOidFromRef(ref)
});
}
},
constructor: function() {
this.callParent([
'<tpl if="this._getCount(values) > 0">',
'<a class="defect-suites-count id-{[values.ObjectID]}" onclick="{[this._getOnClick(values)]}">',
'{[this._getCount(values)]}',
'</a>',
'</tpl>'
]);
},
_getCount: function (recordData) {
return recordData.DefectSuites.Count;
},
_getOnClick: function(recordData) {
return 'DefectSuitesStatusTemplate.onClick(event, \'' + recordData._ref + '\'); return false;';
}
});
//
//Define the app
//
Ext.define('DefectSuitePopoverApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Add the new status template
Rally.ui.renderer.RendererFactory.fieldTemplates.defectsuites = function() {
return Ext.create('DefectSuitesStatusTemplate');
};
//Register the popover
Rally.ui.popover.PopoverFactory.popovers.DefectSuite = function(config) {
return Ext.create('DefectSuitePopover', config);
};
//Add grid
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'Owner',
{
dataIndex: 'DefectSuites',
align: 'center'
},
'Tasks',
'State'
],
context: this.getContext(),
enableEditing: false,
showRowActionsColumn: false,
storeConfig: {
model: 'defect',
filters: [{
property: 'DefectSuites.ObjectID',
operator: '!=',
value: null
}]
}
});
}
});
Rally.launchApp('DefectSuitePopoverApp', {
name:"DefectSuitePopover",
parentRepos:""
});
});
</script>
<style type="text/css">
.app a.defect-suites-count {
cursor: pointer;
color: #337ec6;
}
</style>
</head>
<body>
</body>
</html>
Related
I would like to get a report or custom list that displays all the defects where the defect environment is Production and the parent/associated User Story's release matches the release drop-down on the custom screen.
I found this story and it's close I think, but not sure how to link it to the release drop-down and also not sure how to display the User Story the defect is related to.
RALLY: Determine a parent User Story's release
The output should be the user story ID and Name along with the Defect ID and Name and possibly a few more columns.
I know I could do this via the API, but was trying to see if there is another way inside the existing Rally tools.
Thanks in advance for any help!
You're in luck! I don't get to write apps as much as I'd like and I had some free time this afternoon so I whipped something up for you. Just create a release scoped custom page and add this code to a Custom HTML app on that page.
The app includes a field picker to change the displayed set of fields. I made a best guess at some useful ones to start with. It also includes a control to enable printing and exporting.
<!DOCTYPE html>
<html>
<head>
<title>DefectsByStoryInRelease</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('DefectsByStoryInRelease', {
extend: 'Rally.app.TimeboxScopedApp',
componentCls: 'app',
scopeType: 'release',
onScopeChange: function () {
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['defect'],
autoLoad: true,
enableHierarchy: true,
filters: this._getFilters()
}).then({
success: this._onStoreBuilt,
scope: this
});
},
_onStoreBuilt: function (store) {
var modelNames = ['defect'],
context = this.getContext(),
gridBoard = this.down('rallygridboard');
if (gridBoard) {
gridBoard.destroy();
}
this.add({
xtype: 'rallygridboard',
height: this.getHeight() - ((this.getHeader() && this.getHeader().getHeight()) || 0),
context: context,
modelNames: modelNames,
toggleState: 'grid',
stateful: false,
plugins: [
{
ptype: 'rallygridboardfieldpicker',
headerPosition: 'left',
modelNames: modelNames,
stateful: true,
stateId: context.getScopedStateId('fields')
},
{
ptype: 'rallygridboardactionsmenu',
menuItems: [
{
text: 'Export...',
handler: function () {
window.location = Rally.ui.grid.GridCsvExport.buildCsvExportUrl(
this.down('rallygridboard').getGridOrBoard());
},
scope: this
},
{
text: 'Print...',
handler: function () {
Ext.create('Rally.ui.grid.TreeGridPrintDialog', {
grid: this.down('rallygridboard').getGridOrBoard(),
treeGridPrinterConfig: {
largeHeaderText: 'Defects'
}
});
},
scope: this
}
],
buttonConfig: {
iconCls: 'icon-export'
}
}
],
gridConfig: {
store: store,
columnCfgs: [
'Name',
'Requirement',
'State',
'Priority',
'Severity'
]
}
});
},
_getFilters: function () {
var scope = this.getContext().getTimeboxScope(),
release = scope.getRecord(),
filters = [{
property: 'Environment',
value: 'Production'
}];
if (release) {
filters = filters.concat([
{
property: 'Requirement.Release.Name',
value: release.get('Name')
},
{
property: 'Requirement.Release.ReleaseStartDate',
value: release.get('ReleaseStartDate')
},
{
property: 'Requirement.Release.ReleaseDate',
value: release.get('ReleaseDate')
}
]);
} else {
filters.push({
property: 'Requirement.Release',
value: null
});
}
return filters;
}
});
Rally.launchApp('DefectsByStoryInRelease', {
name: "DefectsByStoryInRelease",
parentRepos: ""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
I would like to filter User Stories for each Project I have in Rally and not just for the one that is currently selected. Is it possible?
This code uses rallyprojectpicker and refreshes the grid based on the project selection:
<!DOCTYPE html>
<html>
<head>
<title>Stories By Project</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'projFilter'
},
{
xtype: 'container',
itemId: 'grid'
}
],
launch: function() {
this.down('#projFilter').add({
xtype: 'rallyprojectpicker',
itemId: 'projPicker',
workspace: '/workspace/12352608129',
value: '/project/12527515559', //default
listeners: {
change: this._onProjectChange,
scope: this
}
});
},
_onProjectChange: function()
{
if(!this.model) {
this._retrieveModel();
} else {
this._refreshGrid();
}
},
_retrieveModel: function(comboBox) {
Rally.data.ModelFactory.getModel({
type:'UserStory',
success:this._onModelRetrieved,
scope: this
});
},
_refreshGrid: function() {
this.grid.reconfigure(this._buildStore());
},
_buildStore: function() {
return Ext.create('Rally.data.WsapiDataStore', {
model: this.model,
autoLoad: true,
context: {
projectScopeUp: false,
projectScopeDown: false,
project: this.down('#projPicker').getValue()
}
});
},
_onModelRetrieved: function(model) {
this.model = model;
this.grid = this.down('#grid').add({
xtype:'rallygrid',
store: this._buildStore(),
columnCfgs:[
'FormattedID',
'Name'
]
});
}
});
Rally.launchApp('CustomApp', {
name: 'Stories By Project'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Having trouble showing parent feature of user stories and sorting by that same parent field. Here's my code. I see empty value in Parent column unless the parent is another user story. And I am not able to sort by Parent field.
Your help would be greatly appreciated!
Thanks!
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'iterationFilter'
},
{
xtype: 'container',
itemId: 'grid',
width: 800
}
],
launch: function() {
this.down('#iterationFilter').add({
xtype: 'rallyiterationcombobox',
cls: 'filter',
model: 'UserStory',
field: 'Iteration',
listeners: {
ready: this._onIterationComboBoxLoad,
select: this._onIterationComboBoxSelect,
scope: this
}
});
},
_onIterationComboBoxLoad: function(comboBox) {
this.iterationComboBox = comboBox;
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: this._onModelRetrieved,
scope: this
});
},
_getFilter: function() {
var filter = [];
filter.push({
property: 'Iteration',
operator: '=',
value: this.iterationComboBox.getValue()
});
return filter;
},
_onIterationComboBoxSelect: function() {
this._onSettingsChange();
},
_onSettingsChange: function() {
this.grid.filter(this._getFilter(), true, true);
},
_onModelRetrieved: function(model) {
this.grid = this.down('#grid').add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Name',
'Plan Estimate',
'Parent',
'Schedule State',
'StoryType'
],
storeConfig: {
context: this.context.getDataContext(),
filters: this._getFilter()
},
showPagingToolbar: true,
enableEditing: false
});
}
});
});
Rally.launchApp('CustomApp', {
name: 'Defect Dashboard'
});
</script>
User Stories have two different fields for their Parent. If the Parent is another story it uses Parent. In the case where the Parent is a Portfolio Item like a Feature the parent will be called PortfolioItem.
You can see the fields on user story by looking at our webservice docs.
In your example you would have to change your column configs to include PorfolioItem
columnCfgs: [
'FormattedID',
'Name',
'Plan Estimate',
'PortfolioItem',
'Schedule State',
'StoryType'
],
I was at least able to show the name of feature for each user story. I am still having an issue to make it sortable though. :(
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<script type="text/javascript" src="/apps/2.0p4/sdk.js?wsapiVersion=1.38"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'iterationFilter'
},
{
xtype: 'container',
itemId: 'grid'
//width: 800
}
],
launch: function() {
this.down('#iterationFilter').add({
xtype: 'rallyiterationcombobox',
cls: 'filter',
model: 'UserStory',
field: 'Iteration',
listeners: {
ready: this._onIterationComboBoxLoad,
select: this._onIterationComboBoxSelect,
scope: this
}
});
},
_onIterationComboBoxLoad: function(comboBox) {
this.iterationComboBox = comboBox;
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: this._onModelRetrieved,
scope: this
});
},
_getFilter: function() {
var filter = [];
filter.push({
property: 'Iteration',
operator: '=',
value: this.iterationComboBox.getValue()
});
return filter;
},
_onIterationComboBoxSelect: function() {
this._onSettingsChange();
},
_onSettingsChange: function() {
this.grid.filter(this._getFilter(), true, true);
},
_onModelRetrieved: function(model) {
this.grid = this.down('#grid').add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Name',
'PlanEstimate',
{
text: 'Feature',
dataIndex: 'PortfolioItem',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (value != null) {
return value.Name;
}
return '';
}
},
'ScheduleState',
'StoryType'
],
storeConfig: {
context: this.context.getDataContext(),
remoteSort: false,
filters: this._getFilter()
},
showPagingToolbar: true,
enableEditing: false
});
}
});
});
Rally.launchApp('CustomApp', {
name: 'Defect Dashboard'
});
</script>
<style type="text/css">
.filter {
float: left;
margin: 5px 5px;
vertical-align: middle;
}
</style>
</head>
<body></body>
</html>
Looking at your revised solution with the renderer, all you need to add is a doSort method to the custom column you have set up. Make sure you set remoteSort to false on the store, then you can override the sorting with a method:
doSort: function(state) {
var ds = this.up('grid').getStore();
var field = this.getSortParam();
ds.sort({
property: field,
direction: state,
sorterFn: function(v1, v2){
v1 = v1.get(field);
v2 = v2.get(field);
return v1.length > v2.length ? 1 : (v1.length < v2.length ? -1 : 0);
}
});
}
This sorter happens to sort by the length of the the field, but you can change it to do what you want. See Ext js sorting custom column by contents
Can anybody put some light on this problem
I would like to add a button to itemTpl in Sencha Touch. The key in {} will be replaced with the values in store. However, is it possible to add buttons in the template as well ?
For example, you list favorite list of music with delete button in each item.
Possible ?
I am not sure whether we can add buttons to itemTpl in Sencha-2 but we can surely add an image to itemTpl and then we can perform various operations (like in your case you want to delete).
Here is the code :-
//demo.js
Ext.define("Stackoverflow.view.demo", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.demo",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "list",
store: "store",
itemId:"samplelist",
loadingText: "Loading Notes...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
onItemDisclosure: true,
itemTpl:"<div class='x-button related-btn' btnType='related' style='border: none; background: url(\"a.png\") no-repeat;'></div>"+
"<div class=\"list-item-title\">{title}</div>"
grouped: true
}
],
listeners:
[
{
delegate: "#samplelist",
event: "disclose",
fn: "onDiscloseTap"
}
]
},
onDiscloseTap: function (list, record, target, index, evt, options) {
this.fireEvent('ondisclosuretap', this, record);
}
});
// Democontrol.js
Ext.define("Stackoverflow.controller.Democontrol", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
Demo: "demo",
Demo1: "demo list",
},
control: {
Demo: {
ondisclosuretap: "Disclosure",
},
Demo1: {
itemtap:"imagetap"
}
}
},
Disclosure: function (list, record,target,index,e,obj) {
Ext.Msg.alert('','Disclosure Tap');
},
imagetap: function (dataview,index,list,record, tar, obj) {
tappedItem = tar.getTarget('div.x-button');
btntype = tappedItem.getAttribute('btnType');
if(btntype == 'related')
{
Ext.Msg.alert('','Image/Icon Tap');
}
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
},
init: function () {
this.callParent(arguments);
}
});
//app.css
.related-btn
{
width: 100px;
height: 100px;
position: absolute;
bottom: 0.85em;
right: 2.50em;
-webkit-box-shadow: none;
}
Hope this will help.
I am new to ExtJS and have written a sample App using Ext.application with Ext.direct. I configured my model as shown below
Ext.define('AM.model.UserModel', {
extend: 'Ext.data.Model',
alias : 'widget.userModel',
fields: ['SlNo','name']
proxy: {
type: 'direct',
directfn: HelloWorld.getGridDetails
}
});
and I am using grid Panel as shown below
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'Users',
initComponent: function() {
this.store = {
model:'AM.model.UserModel',
autoload:true,
};
this.columns = [
{
header: 'SlNo',
dataIndex: 'SlNo',
width:100,
disabled:false
},
{
header: 'Name',
dataIndex: 'name',
width:150
}
];
this.callParent(arguments);
}
});
finally my index.js looks like this
Ext.require('Ext.direct.*', function() {
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
});
Ext.require([ 'AM.view.user.List','AM.model.UserModel']);
Ext.application({
name: 'AM',
appFolder:'myApp',
launch: function() {
Ext.Direct.addProvider(Ext.app.DirectAPI);
Ext.create('Ext.container.Viewport', {
items: {
xtype: 'userlist',
width: 552
},
renderTo: Ext.getBody()
});
}
});
The data I receive when I call HelloWorld.getGridDetails from index.js is as shown below
action: "HelloWorld",
method: "getGridDetails",
result: [
{slNo:2, name:"patton"},
{slNo:3, name:"Omar N Bradely"},
{slNo:1, name:"Sam Manekshaw"}
],
tid: 1,
type: "rpc"
The problem is that I am not able to load data in to the grid i.e, The direct method HelloWorld.getGridDetails is not at all getting called when the grid is displayed. Am I missing something? Can anyone of you please help?
Thanks
Kumar
I actually figured out the solution for this. Though it doesnt make sense now, better late than never. I need to modify the following in the index.html
<script type="text/javascript" src="Api.js"></script>
**<script type="text/javascript">Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);</script>**
<script type="text/javascript" src="index.js"></script>
After adding
<script type="text/javascript">Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);</script>
before index.js. It started working.