Service Data Table – append column

Martin Lorenz

January 30, 2017 at 4:12 am #3604

Hello,

I have specyfic problem and I need help.  I have business object, e.g:

var period = new tw.object.listOf.Period();
period[0] = new tw.object.Period();
period[0].value1 = 11000;
period[0].value2 = 24;
period[0].value3 = 350;

period[1] = new tw.object.Period();
period[1].value1 = 30000;
period[1].value2 = 48;
period[1].value3 = 3540;

period[2] = new tw.object.Period();
period[2].value1 = 9000;
period[2].value2 = 12;
period[2].value3 = 50;

period[3] = new tw.object.Period();
period[3].value1 = 19000;
period[3].value2 = 36;
period[3].value3 = 520;

In the AJAX Service I do transformation on column object:

tw.local.results = new tw.object.listOf.Column();
tw.local.results[0] = new tw.object.Column();
tw.local.results[0].label = “Row 1”;
tw.local.results[0].column1 = period[0].value1;
tw.local.results[0].column2 = period[1].value1;
tw.local.results[0].column3 = period[2].value1;
tw.local.results[0].column4 = period[3].value1;
tw.local.results[1] = new tw.object.Column();
tw.local.results[1].label = “Row 2”;
tw.local.results[1].column1 = period[0].value2;
tw.local.results[1].column2 = period[1].value2;
tw.local.results[1].column3 = period[2].value2;
tw.local.results[1].column4 = period[3].value2;
tw.local.results[2] = new tw.object.Column();
tw.local.results[2].label = “Row 3”;
tw.local.results[2].column1 = period[0].value3;
tw.local.results[2].column2 = period[1].value3;
tw.local.results[2].column3 = period[2].value3;
tw.local.results[2].column4 = period[3].value3;

And in Custom HTML control I do:

<script>
function updateColumns () {
var SDT = page.ui.get(“/Service_Data_Table1”);

var columnSpecs = [
{width: “20%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “label”, renderAs: “H”, label: “”},
{width: “15%”, visibility: true, sortable: true, cssClass: “”, dataElementName: “column1”, renderAs: “H”, label: “Label column 1”},
{width: “15%”, visibility: true, sortable: true, cssClass: “”, dataElementName: “column2”,renderAs: “H”,label: “Label column 2”},
{width: “15%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “column3”, renderAs: “H”, label: “Label column 3”},
{width: “15%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “column4”, renderAs: “H”, label: “Label column 4” }
,];

SDT.setColumns(columnSpecs);
SDT.refresh();
}
</script>

An ok, every thing work but problem somewhere else. I don’t know period list length. It is dynamic. May have one element but may have ten elements. It is possible create table dynamically with business object which is list of different length?

Very please help.

SPARK Support

January 30, 2017 at 9:36 am #3607

Hi Martin,

The results variable returned from the AJAX service should be used to populate the rows of the Service Data Table.  Whereas setColumns() can be used to programmatically change the column configuration, such as labels or changes in width.  However, either way, the number of columns should be known for the table being loaded.  Per our knowledge article, the best practice is to use the Columns Configuration settings to declare the specifications and Labels from the Controls contained in the Service Data Table control.

https://salientprocess.zendesk.com/hc/en-us/articles/206650727-Service-Data-Table

For your AJAX service, if the length of period is dynamic, I would use a loop to load results:

tw.local.results = new tw.object.listOf.Period();

for (var i = 0; i < period.length; i++) {

tw.local.results[i] = new tw.object.Period();
tw.local.results[i].value1= period[i].value1;
tw.local.results[i].value2= period[i].value2;
tw.local.results[i].value3= period[i].value3;
tw.local.results[i].value4= period[i].value4;

}

Regards,

Stephen P.

Martin Lorenz

January 30, 2017 at 12:51 pm #3608

Than you for replay :). I would like to ask, Can I dynamically create JSON? This is static example:

function updateColumns () {
var SDT = page.ui.get(“/Service_Data_Table1”);

var columnSpecs = [
{width: “20%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “label”, renderAs: “H”, label: “”},
{width: “15%”, visibility: true, sortable: true, cssClass: “”, dataElementName: “column1”, renderAs: “H”, label: “Label column 1”},
{width: “15%”, visibility: true, sortable: true, cssClass: “”, dataElementName: “column2”,renderAs: “H”,label: “Label column 2”},
{width: “15%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “column3”, renderAs: “H”, label: “Label column 3”},
{width: “15%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “column4”, renderAs: “H”, label: “Label column 4” }
,];

SDT.setColumns(columnSpecs);
SDT.refresh();
}

But it is possible create above configuration in loop?

SPARK Support

January 31, 2017 at 2:49 pm #3613

Hi Martin,

You could loop through the variables with something like this.

var dataElementNames = [“type”,”subType”,”region”,”stat”];
var labels = [“Type”, “Range”, “Country”, “Value”];
var widths = [“40%”, “15%”, “15%”, “30%”];
var columnSpecs = [];

for (var i = 0; i < dataElementNames.length; i++){
var columnSpec = {width: widths[i], visibility: true, sortable: false, cssClass: “”, dataElementName: dataElementNames[i], renderAs: “H”,    label: labels[i]};
columnSpecs.push(columnSpec);
}
columnSpecs[1].sortable = true;
columnSpecs[2].sortable = true

Regards,

Stephen P.

Martin Lorenz

February 6, 2017 at 2:00 am #3631

Hello,
I have another question for you. How to use in ajax service, data’s from outside? For example:
I set my period data object in script before coach:

tw.local.data = new tw.object.Data();
tw.local.data.period = new tw.object.listOf.Period();
tw.local.data.period[0] = new tw.object.Period();
tw.local.data.period[0].value1 = 11000;
tw.local.data.period[0].value2 = 24;
tw.local.data.period[0].value3 = 350;

tw.local.data.period[1] = new tw.object.Period();
tw.local.data.period[1].value1 = 30000;
tw.local.data.period[1].value2 = 48;
tw.local.data.period[1].value3 = 3540;

tw.local.data.period[2] = new tw.object.Period();
tw.local.data.period[2].value1 = 9000;
tw.local.data.period[2].value2 = 12;
tw.local.data.period[2].value3 = 50;

tw.local.data.period[3] = new tw.object.Period();
tw.local.data.period[3].value1 = 19000;
tw.local.data.period[3].value2 = 36;
tw.local.data.period[3].value3 = 520;

Ok, next step, in ajax service I have:

tw.local.results = new tw.object.listOf.Column();
tw.local.results[0] = new tw.object.Column();
tw.local.results[0].label = “Row 1”;
tw.local.results[0].column1 = tw.local.data.period[0].value1;
tw.local.results[0].column2 = tw.local.data.period[1].value1;
tw.local.results[0].column3 = tw.local.data.period[2].value1;
tw.local.results[0].column4 = tw.local.data.period[3].value1;
tw.local.results[1] = new tw.object.Column();
tw.local.results[1].label = “Row 2”;
tw.local.results[1].column1 = tw.local.data.period[0].value2;
tw.local.results[1].column2 = tw.local.data.period[1].value2;
tw.local.results[1].column3 = tw.local.data.period[2].value2;
tw.local.results[1].column4 = tw.local.data.period[3].value2;
tw.local.results[2] = new tw.object.Column();
tw.local.results[2].label = “Row 3”;
tw.local.results[2].column1 = tw.local.data.period[0].value3;
tw.local.results[2].column2 = tw.local.data.period[1].value3;
tw.local.results[2].column3 = tw.local.data.period[2].value3;
tw.local.results[2].column4 = tw.local.data.period[3].value3;

Oject period I binding with “Service data” in Service Data Table, whereas Ajax service, binding with “Data Service”. In Cusotom html I have function:

<script>
function updateColumns () {
var SDT = page.ui.get(“/Service_Data_Table1”);

var columnSpecs = [
{width: “20%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “label”, renderAs: “H”, label: “”},
{width: “15%”, visibility: true, sortable: true, cssClass: “”, dataElementName: “column1”, renderAs: “H”, label: “Label column 1”},
{width: “15%”, visibility: true, sortable: true, cssClass: “”, dataElementName: “column2”,renderAs: “H”,label: “Label column 2”},
{width: “15%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “column3”, renderAs: “H”, label: “Label column 3”},
{width: “15%”, visibility: true, sortable: false, cssClass: “”, dataElementName: “column4”, renderAs: “H”, label: “Label column 4” }
,];

SDT.setColumns(columnSpecs);
SDT.refresh();
}
</script>

which I call in On Load Events in Service Data Table (@updateColumns();). And such construction does’t work. Table is empty. Where I make mistake? Please help.

Vignesh Dhakshinamoorthy

February 14, 2017 at 10:30 pm #3711

Check your browser console, do you see any error like this?

Uncaught ReferenceError: page is not defined

Your function should run after the table and other controls are loaded.

SPARK Support

February 17, 2017 at 3:10 pm #3764

Hi Martin,

Please inspect the SPARK Showcase – Service Data Table Showcase.

In this HHS, there is a Service Data Table named Table13 for Drinks, Calories and Sugar Content.

On the Configuration tab, under Columns, there currently are the specifications to render the table data input.

I could instead create a variable “columns” of ServiceDataTableColumn.

Then, in Server Side script, initialize the variable:

tw.local.columns = new tw.object.listOf.toolkit.SPARK15.ServiceDataTableColumn();

for (var i = 0; i < 3; i++) {
tw.local.columns[i] = new tw.object.toolkit.SPARK15.ServiceDataTableColumn();
tw.local.columns[i].css = “”;
tw.local.columns[i].options = “”;
tw.local.columns[i].sortable = false;
tw.local.columns[i].visibility = “V”;
tw.local.columns[i].renderAs = “H”;
}

tw.local.columns[0].dataElementName = “name”;
tw.local.columns[1].dataElementName = “calories”;
tw.local.columns[2].dataElementName = “sugar”;

Then set the Columns configuration option to the variable columns.

This variable and the setColumns() method have nothing to do with the results from the Table Data Service, other than the data element names should match the properties of the results variable.  Columns and setColumns() are used for formatting how it is rendered.

Regards,

Stephen P.