Report Writing - Mobile device reports

Setting up a mobile device report using Sencha touch and/or Sencha touch chart frameworks is similar as setting up a charting report.

In the header, there should be the following:

for styles, and

For mobile-versioned stacked charting reports, there are several variables that need to set, as highlighted:

//alert(JSON.stringify(generateData(5, 20)));

var onRefreshTap = function() {
window.store1.loadData([<?=$seriesdata?>]);
};

var onHelpTap = function() {
new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
height: 250,
styleHtmlContent: true,
scroll: ‘vertical’,
dockedItems: [{
dock: ‘top’,
xtype: ‘toolbar’,
title: ‘Work Order by Crew and Status’
}],
stopMaskTapEvent: false,
fullscreen: false,
html: “<b>Work Order by Crew and Status</b><br>\n\
Try this on iPad and iPhone”
}).show(‘pop’);
};

var chartPanel = new Ext.chart.Panel({
title: ‘Work Order by Crew and Status’,
fullscreen: true,
dockedItems: [{
xtype: ‘button’,
iconCls: ‘help’,
iconMask: true,
ui: ‘plain’,
handler: onHelpTap
}, {
xtype: ‘button’,
iconCls: ‘shuffle’,
iconMask: true,
ui: ‘plain’,
handler: onRefreshTap
}],
items: {
cls: ‘bar1’,
theme: ‘Demo’,
store: store1,
animate: true,
shadow: false,
legend: {
position: {
portrait: ‘right’,
landscape: ‘top’
},
labelFont: ’17px Arial’
},
interactions: [{
type: ‘reset’
},
{
type: ‘panzoom’,
axes: {
left: {}
}
},
{
type: ‘iteminfo’,
gesture: ‘taphold’,
panel: {
dockedItems: [{
dock: ‘top’,
xtype: ‘toolbar’,
title: ‘Details’
}],

html: ‘Testing’
},
listeners: {
‘show’: function(me, item, panel) {
panel.update(‘<ul><li><b>Crew:</b> ‘ + item.value[0] + ‘</li><li><b>Value: </b> ‘ + item.value[1] + ‘</li></ul>’);
}
}
},
{
type: ‘itemcompare’,
offset: {
x: -10
},
listeners: {
‘show’: function(interaction) {
var val1 = interaction.item1.value,
val2 = interaction.item2.value;

chartPanel.descriptionPanel.setTitle(val1[0] + ‘ to ‘ + val2[0] + ‘ : ‘ + Math.round((val2[1] – val1[1]) / val1[1] * 100) + ‘%’);
chartPanel.headerPanel.setActiveItem(1, {
type: ‘slide’,
direction: ‘left’
});
},
‘hide’: function() {
chartPanel.headerPanel.setActiveItem(0, {
type: ‘slide’,
direction: ‘right’
});
}
}
}],
axes: [{
type: ‘Numeric’,
position: ‘bottom’,
fields: [<?=$legenddata?>], //wo status
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: ‘Number of Work Orders’,
minimum: 0
},
{
type: ‘Category’,
position: ‘left’,
fields: [‘CREW’],
title: ‘Crews’
}],
series: [{
type: ‘bar’,
stacked: true,
xField: ‘CREW’,
yField: [<?=$legenddata?>], //wo status
axis: ‘bottom’,
highlight: true,
showInLegend: true
}]
}
});
}
});

Not including the parameters that are set directly, there are:

$seriesdata

Series data have to be in the form:

{‘series1′:value1,,’series2′:value2,…., seriesL:valueL,’cluster’:clustername}

where L is the number of series (in this specific example, it is the number of statuses). An example is following:

{‘ASSIGNED’:127,’CANCELED’:142,’CLOSED’:26675,’COMPLETE’:207,’CONV PROJ’:0,’HOLD’:0,’OPEN’:3,’PARTS’:0,’SUPERSEDED’:3,’UNKNOWN’:20,’CREW’:’3RD SHIFT’},{‘ASSIGNED’:34,’CANCELED’:40,’CLOSED’:5834,’COMPLETE’:74,’CONV PROJ’:0,’HOLD’:0,’OPEN’:5,’PARTS’:0,’SUPERSEDED’:2,’UNKNOWN’:1,’CREW’:’ADMIN’}

$legenddata

Legend data have to be in the form:

‘Legend1′,’Legend2′,…,’LegendN’

where N is the number of legends. An example is following:

‘ASSIGNED’,’CANCELED’,’CLOSED’,’COMPLETE’,’CONV PROJ’,’HOLD’,’OPEN’,’PARTS’,’SUPERSEDED’,’UNKNOWN’

$labeldata

Label data have to be in the form:

label1,label2,…,labelM

where M is the number of labels along the axis.

An example is given below:

‘2ND SHIFT’,’3RD SHIFT’,’CARPENTRY’

Note: mobile/fac_wo_crew_status.php is in Test as a pilot report.

Draft of IWMS Site

Report Writing – Mobile device reports