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>
Related
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>
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
I am trying to fetch data from store.and i want to use it on my table layout in an extjs panel but always get an empty string though the data is printed in the console. Any pointers would be much appreciated.
<code>
Ext.onReady(function(){
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'nooflicenses'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Account',
autoSync: true,
proxy: {
type: 'ajax',
api: {
read: "accounts"
},
reader: {
type: 'json',
root: 'Account',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'results',
idProperty: 'id'
},
listeners: {
exception: function(proxy, type, action, o, result, records) {
if (type = 'remote') {
Ext.Msg.alert("Could not ");
} else if (type = 'response') {
Ext.Msg.alert("Could not " + action, "Server's response could not be decoded");
} else {
Ext.Msg.alert("Store sync failed", "Unknown error");}
}
}//end of listeners
}//end of proxy
});
store.load();
store.on('load', function(store, records) {
for (var i = 0; i < records.length; i++) {
console.log(store.data.items[0].data['name']); //data printed successfully here
console.log(store.getProxy().getReader().rawData);
console.log(store);
};
});
function syncStore(rowEditing, changes, r, rowIndex) {
store.save();
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
saveText: 'Save',
listeners: {
afteredit: syncStore
}
});
var grid = Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 500,
height:'30%',
store: store,
layout: {
type: 'table',
// The total column count must be specified here
columns: 2,
tableAttrs: {
style: {
width: '100%',
height:'100%'
}
},
tdAttrs: {
style: {
height:'10%'
}
}
},
defaults: {
// applied to each contained panel
bodyStyle:'border:0px;',
xtype:'displayfield',
labelWidth: 120
},
items: [{
fieldLabel: 'My Field1',
name :'nooflicenses',
value: store //How to get the data here
//bodyStyle:'background-color:red;'
},{
fieldLabel: 'My Field',
name:'name',
value:'name'
}],
renderTo: document.getElementById("grid1")
});
});
</code>
Ext.grid.Panel control is totally configurable so it allows to hide different parts of the grid. In our case the way to hide a headers is adding property: hideHeaders:
Ext.create("Ext.grid.Panel", {
hideHeaders: true,
columns: [ ... ],
... other options ...
});
If you still would like to adopt another solution, the more complex solution I have think about is the use of XTemplate for building table dynamically. (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate). In this approach you write the template describing how the table will be built.
Otherwise, I still recommend you to deal with the former solution rather than the latter one. The latter approach opposes the basic idea of Sencha ExtJS: use ExtJS library's widgets, customize them in the most flexible way and then automate them by creating store and model.
The most "native" way to show data is by use Ext.grid.Panel.
Example:
Ext.application({
name: 'LearnExample',
launch: function() {
//Create Store
Ext.create ('Ext.data.Store', {
storeId: 'example1',
fields: ['name','email'],
autoLoad: true,
data: [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
});
Ext.create ('Ext.grid.Panel', {
title: 'example1',
store: Ext.data.StoreManager.lookup('example1'),
columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
],
renderTo: Ext.getBody()
});
}
});
The grid can be configured in the way it mostly customized for user's needs.
If you have a specific reason why to use Ext.panel.Panel with a table layout, you can use XTemplate, but it more complicate to bind the data.
I am new to sencha. Almost spent 2 day to understand sencha routing/history support to implement android back button. but ended up with blank screen always although navigation is working. Please help me to find out what wrong am i doing or what is wrong with my application architecture.
app.js
Ext.application({
name: "WorkFlow",
models: [],
stores: [],
controllers: ["WFController"],
views: ["LoginForm","WorkList"],
launch: function () {
var loginForm = {
xtype: "loginform"
};
var workList = {
xtype: "worklist"
};
Ext.Viewport.add([loginForm,workList]);
// set up a listener to handle the back button for Android
if (Ext.os.is('Android')) {
document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false);
function onBackKeyDown(e) {
e.preventDefault();
// you are at the home screen
if (Ext.Viewport.getActiveItem().xtype == loginForm.xtype ) {
navigator.app.exitApp();
}else {
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'loginForm'
}));
}
}
}
}
});
LoginForm.js
var formPanel = null;
Ext.define("WorkFlow.view.LoginForm", {
extend: "Ext.form.Panel",
alias: "widget.loginform",
initialize: function () {
this.callParent(arguments);
formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'titlebar',
title: 'Login',
docked: 'top'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username',
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password',
},
{
xtype: 'textfield',
name : 'deviceId',
label: 'Device Id',
}
]
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Login',
handler: this.onLoginTap,
scope: this
},
{
xtype: 'button',
text: 'Cancel',
handler: function() {
formPanel.reset();
}
}
]
});
},
onLoginTap: function() {
this.fireEvent("loginCommand", this);
},
});
WorkList.js
Ext.define("WorkFlow.view.WorkList", {
extend: "Ext.form.Panel",
alias: "widget.worklist",
config:{
html: 'This is worklist...',
}
});
WFController.js
Ext.define("WorkFlow.controller.WFController", {
extend: "Ext.app.Controller",
config: {
refs: {
loginForm: "loginform",
workList: "worklist",
},
control: {
loginForm: {
loginCommand: "onLoginCommand",
}
},
routes: {
'loginForm': 'activateLoginFormPage'
}
},
activateLoginFormPage: function(){
Ext.Viewport.animateActiveItem(this.getLoginForm(), this.slideRightTransition);
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
onLoginCommand: function () {
var values = formPanel.getValues();
window.plugins.AuthPlugin.authenticate(values.username,values.passwordvalues.deviceId,values,
function loginCallBack(result){
if(result=="PASSWORD_MATCH"){
loginForm.onLoginSuccess();
}
});
},
onLoginSuccess: function(){
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'loginFormroute/workList'
}));
Ext.Viewport.animateActiveItem(this.getWorkList(), this.slideRightTransition);
},
launch: function () {
},
init: function () {
}
});
Not totally sure of what you are trying to accomplish, but if it is just regular navigation (press back to return to previous tab etc.) then you do not need to bind anything to the android back button. You should use routes and create a history item for every step the user takes.
Example: I have an app with two tabs, in one of the tabs there is a list of locations and in the second one there is a map with the same locations marked. Pressing on wither a list item or a location in the map generates the same details screen. So this is what I got to get this to work:
Routes:
routes: {
'tab/:tabId': 'gotoTab',
'details/:stnId': 'viewDetails'
},
Important part: ensure that you create history items for each step, I basically have two in this app, one for changing tabs and one for opening a details page.
So, tabs:
//If I change to the 'map' tab, it will navigate the browser to myapp.com/#tab/map
// and therefore creating a history item.
onTabpanelActiveItemChange: function(container, value, oldValue, options) {
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'tab/' + value.id
}), true);
},
Similar for my details page, only it is a function that is called from two seperate handlers (one for the list and one for the map):
showDetails: function(record, staticUrl, doUpdate) {
/*some logic stripped out*/
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'details/' + record.data.id
}), true);
}
After this you are more or less ready to go, if you can guarantee that users always start at the main page. If you enable deep-linking etc. than you will need to restore a state for those links. e.g. a #/tab/map/ link should open the app with the map tab active.
If we take my details page as an example, we have a few things to do. First of all re-create history (press back on details page returns to tab-list by default in my app) and then ensure that stores are loaded and so on.
So as a final example, my viewDetails route:
var store = Ext.StoreManager.get("dcStations");
//recreate history
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'tab/list'
}), true);
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'details/' + stnId
}), true);
//make sure the store is loaded, then show the details page with passed id
store.on("load", function() {
this.showDetails(Ext.StoreManager.get("dcStations").getById(stnId));
}, this);
Hope that this boosts your efforts in getting started with routes and history management
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.