I recently saw a question in the SAP BusinessObjects Design Studio space asking how to make a selectable version of the Simple Table example provided with the Design Studio SDK.  Below was my approach that others may find useful.

I began by simply copying the ‘com.sap.sample.simpletable’ project to a new one called ‘com.sample.sapui5table’.  I then renamed all the references to the old component in the MANIFEST.MF, component.xml, component.ztl and component.js files.

Next, I decided instead of using HTML string fragments and JQuery syntax, that I would use the SAPUI5 table component so that I could utilize the row selection API and JSONModel to build in the data.  Below is the new component.js code


sap.designstudio.sdk.Component.subclass("com.sample.sapui5table.SAPUI5Table", function() {
  var that = this;
  var column1_data = null;
  var column2_data = null;
  var column3_data = null;
  var meta_data = null;
  var myUI5Table = null;
  var myModel = null;
  var concatenatedDimension = "";
    // Simple getter/setter
    this.rowClicked = function(value){
    if(value===undefined) {
    // Getter
    return concatenatedDimension;
    }else{
    // Setter (fluent interface)
    return this;
    }
    };
  
  this.rowChanged = function(evt){
  concatenatedDimension = "";
  var rowContext = evt.getParameters().rowContext;
  if(rowContext){
  concatenatedDimension = myModel.getProperty(rowContext+"/headingColumn");
  }else{
  concatenatedDimension = "";
  }
  that.firePropertiesChanged(["rowClicked"]); // SDK proxies these properties, must inform of change
  that.fireEvent("onclick");
  };
  this.init = function() {
  myUI5Table = new sap.ui.table.Table({
  selectionMode: sap.ui.table.SelectionMode.Single,
  rowSelectionChange : this.rowChanged
  });
  this.$().css("overflow-y", "scroll");
  myUI5Table.placeAt(this.$()); // Until SAP gives us an official way...
  };
  this.afterUpdate = function() {
  try{
  var tabularData = [];
  if(column1_data){
  for (var i = 0; i < column1_data.data.length; i++) {
  var newRow = {};
  var tuple = column1_data.tuples[i];
  var rowHeaderText = "";
  for (var j = 0; j < tuple.length; j++) {
  if (column1_data.selection[j] == -1) {
  rowHeaderText += " " + meta_data.dimensions[j].members[tuple[j]].text;
  }
  }
  rowHeaderText = rowHeaderText.replace("|", " "); // Delimiter used for multiple presentations
  newRow.headingColumn = rowHeaderText;
  newRow.col1 = formatValue(column1_data.data[i], column1_data.tuples[i]);
  if(column2_data) newRow.col2 = formatValue(column2_data.data[i], column2_data.tuples[i]);
  if(column3_data) newRow.col3 = formatValue(column3_data.data[i], column3_data.tuples[i]);
  tabularData.push(newRow);
  }
  }
  myUI5Table.removeAllColumns();
  if(column1_data){
  var columnHeaderText = "";
  for (var i = 0; i < column1_data.selection.length; i++) {
  var selectionIndex = column1_data.selection[i];
  if (selectionIndex != -1) columnHeaderText += " " + meta_data.dimensions[i].members[selectionIndex].text;
  }
  myUI5Table.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text : "Concatenated Dimension"}),
  template: new sap.ui.commons.TextView().bindProperty("text", "headingColumn"),
  sortProperty: "headingColumn",
  filterProperty: "headingColumn"
  }));
  myUI5Table.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text : columnHeaderText}),
  template: new sap.ui.commons.TextView().bindProperty("text", "col1"),
  sortProperty: "col1",
  filterProperty: "col1"
  }));
  if(column2_data){
  var columnHeaderText = "";
  for (var i = 0; i < column2_data.selection.length; i++) {
  var selectionIndex = column2_data.selection[i];
  if (selectionIndex != -1) columnHeaderText += " " + meta_data.dimensions[i].members[selectionIndex].text;
  }
  myUI5Table.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text : columnHeaderText}),
  template: new sap.ui.commons.TextView().bindProperty("text", "col2"),
  sortProperty: "col2",
  filterProperty: "col2"
  }));
  }
  if(column3_data){
  var columnHeaderText = "";
  for (var i = 0; i < column3_data.selection.length; i++) {
  var selectionIndex = column3_data.selection[i];
  if (selectionIndex != -1) columnHeaderText += " " + meta_data.dimensions[i].members[selectionIndex].text;
  }
  myUI5Table.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text : columnHeaderText}),
  template: new sap.ui.commons.TextView().bindProperty("text", "col3"),
  sortProperty: "col3",
  filterProperty: "col3"
  }));
  }
  myModel = new sap.ui.model.json.JSONModel();
  myModel.setData({modelData: tabularData});
  myUI5Table.setModel(myModel);
  myUI5Table.bindRows("/modelData");
  myUI5Table.setVisibleRowCount(column1_data.data.length);
  };
  }catch(e){
  alert(e);
  }
  };
  function formatValue(value, tuple) {
  if (value === null) {
  return "";
  }
  if (meta_data) {
  for (var i = 0; i < meta_data.dimensions.length; i++) {
  var strFormat = meta_data.dimensions[i].members[tuple[i]].formatString;
  if (strFormat) {
  // use CVOM library to format cell value
  sap.common.globalization.NumericFormatManager.setPVL(meta_data.locale);
  return sap.common.globalization.NumericFormatManager.format(value, strFormat);
  }
  }
  }
  return value;
  }
  // called from Additional Properties Sheet JavaScript file
  this.getMetadataAsString = function() {
  return JSON.stringify(this.metadata());
  };
  // property setter/getter functions
  this.column1 = function(value) {
  if (value === undefined) {
  return column1_data;
  } else {
  column1_data = value;
  return this;
  }
  };
  this.column2 = function(value) {
  if (value === undefined) {
  return column2_data;
  } else {
  column2_data = value;
  return this;
  }
  };
  this.column3 = function(value) {
  if (value === undefined) {
  return column3_data;
  } else {
  column3_data = value;
  return this;
  }
  };
  this.metadata = function(value) {
  if (value === undefined) {
  return meta_data;
  } else {
  meta_data = value;
  return this;
  }
  };
});

Next, I updated the component.xml file to hold the new properties of onclick and rowSelected:


<?xml version="1.0" encoding="UTF-8"?>
<sdkExtension xmlns="http://www.sap.com/bi/zen/sdk"
  title="SAP UI5 Table"
  version="1.0"
  vendor="SAP"
  id="com.sample.sapui5table">
  <component id="SAPUI5Table"
  title="SAP UI5 Table"
  icon="res/icon.png"
  handlerType="div"
  propertySheetPath="res/additional_properties_sheet/additional_properties_sheet.html"
  databound="true">
  <stdInclude kind="cvom" />
  <jsInclude>res/js/component.js</jsInclude>
  <property id="column1" type="ResultCellList" title="Column 1" group="DataBinding"/>
  <property id="column2" type="ResultCellList" title="Column 2" group="DataBinding"/>
  <property id="column3" type="ResultCellList" title="Column 3" group="DataBinding"/>
  <property type="ScriptText" title="On Row Click" id="onclick" group="Events"></property>
  <property type="String" title="Row Clicked" id="rowClicked" visible="false"></property>
  <initialization>
  <defaultValue property="WIDTH">100</defaultValue>
  <defaultValue property="HEIGHT">100</defaultValue>
  </initialization>
  </component>
</sdkExtension>

Finally, I updated the component.ztl with so that we can access the concatenated dimension in BIAL:


class com.sample.sapui5table.SAPUI5Table extends Component {
  /**
  Use to get Concatenated Dimension of row clicked
  */
  String getRowClicked() {*
  return this.rowClicked;
  *}
}

So, now bringing the component into DS, we can see that after binding some data and picking some columns (Column 1 being required, just like SAP’s sample), we can see data:

/wp-content/uploads/2014/01/ui5table1_368403.png

You also so a ‘On Row Click’ even that you can write some BIAL script in.  Below is an example that will populate a Text label with the dimension value:

/wp-content/uploads/2014/01/ui5table2_368408.png

During runtime, we can see this in action:

/wp-content/uploads/2014/01/ui5table3_368409.png

As an added bonus, we can see some other native SAPUI5 Table functionality that you can leverage (rudimentary filtering and sorting):

/wp-content/uploads/2014/01/ui5table4_368410.png

As you can see, since DS SDK uses SAPUI5 under the hood, why not go ahead and leverage it instead of manually creating HTML tables by hand?

Resources:

SAPUI5 SDK – Demo Kit

SAPUI5 SDK – Table API Reference

Considerations:

DS 1.2 uses SAPUI5 1.12.7, so you’ll want to find a copy of the API docs on SAP SWDC since the online API docs are a higher version, but most of the API works as a starting point of reference.

SAP has stated that they will offer a more “official” way to use and extend SAPUI5 components, but for now, this seems to work while we patiently wait.

Hope this helps!

To report this post you need to login first.

42 Comments

You must be Logged on to comment or reply to a post.

  1. Anil S

    This is very helpful Michael, Thanks for your post. I was looking for a simpler table which gives me the functionality to sort, select and filter (table records) and was thinking to build using HTML. Your post will definitely help. Thanks.

    (0) 
  2. Gerben Niewold

    Hi Michael,

    Working with it and I really like the table!

    Some questions:

    –     I have a dimension in the dataset but not displaying it in table. It’s numeric SortOrder dimension, I’d like to sort the table on that. How can I do that? This dimension can be referred to as meta_data.dimension[1] I suspect, it is the first dimension column in datasource and not displayed because in the rowHeaderText loop i skip it by starting the loop with for (var j =2;….

    – Between the 1st and 2nd measure column header is no borderline visible. How can this be fixed? I also see it in your screenshots.

    – Is it also possible to respond to full row selection, so now only when clicking in the empty cell at start of the row but everywhere during highlighting when clicked?

    – How can I paint a little icon in the first column with a configurable color, for a traffic light ? I have another meta_data.dimension  field available with a code that tells me what number I should use.

    Thanks a lot!

    (0) 
    1. Mike Howles Post author

      –     I have a dimension in the dataset but not displaying it in table. It’s numeric SortOrder dimension, I’d like to sort the table on that. How can I do that? This dimension can be referred to as meta_data.dimension[1] I suspect, it is the first dimension column in datasource and not displayed because in the rowHeaderText loop i skip it by starting the loop with for (var j =2;….


      As we iterate through the dataset and are creating newRow, when looping thru the dimensions to create a rowHeader, we can add another property to newRow such as:

      newRow.sortVal = meta_data.dimensions[2].members[tuple[2]].key;  // Assuming 2 is the dimension index of where your Sort val is.


      Then, on at least your concetenated Dimension Table Column (and you could also make it work on all columns), you would apply that new property as your sort property:


      myUI5Table.addColumn(new sap.ui.table.Column({ 

        label: new sap.ui.commons.Label({text : “Concatenated Dimension”}), 

        template: new sap.ui.commons.TextView().bindProperty(“text”, “headingColumn”), 

        sortProperty: “sortVal”

        filterProperty: “headingColumn” 

        })); 

      Between the 1st and 2nd measure column header is no borderline visible. How can this be fixed? I also see it in your screenshots.


      I’ve noticed this and I can only assume that it’s come quirky CSS incompatibilities with SAPUI5 and the Design Studio stylesheets.  Switching to the ‘Gold’ theme is one workaround, or just crack open a CSS book and F12 tools and figure out how to tweak it 😉


      – Is it also possible to respond to full row selection, so now only when clicking in the empty cell at start of the row but everywhere during highlighting when clicked?


      There’s probably a way, but I didn’t care enough to figure it out.  You could probably ask the SAPUI5 guys how to do this if the API reference doesn’t help (Maybe look at the sap.ui.table.Column API)

      – How can I paint a little icon in the first column with a configurable color, for a traffic light ? I have another meta_data.dimension  field available with a code that tells me what number I should use.

      You can specify a different renderer in the template property when you create each column:

      new sap.ui.table.Column({ 

        label: new sap.ui.commons.Label({text : columnHeaderText}), 

        template: new sap.ui.commons.TextView().bindProperty(“text”, “col1”), 

        sortProperty: “col1”

        filterProperty: “col1” 

        }))


      You can see the demo kit linked in the post for examples where you can replace the TextView with like a rating indicator, for a scorecard type effect.  There would be no reason why you couldn’t create your own custom renderer for color formatting or stoplight iconography.


      (0) 
  3. Sri Chowdary

    Hi Michael,

    Thank you for sharing your knowledge! 

    Also, If possible, can you give me an example on how I should call the document.ready function as shown below?

    /*

    * Example init

    */

    $(document).ready(function(){

    $('#example').dataTable();

    });


    Regards,

    Sri

    (0) 
  4. Anil S

    Hi Michael,

    Wondering, how do we add the vertical scrolling in this table. The “overflow” property defined in this component scrolls the complete “div”, which then scrolls the Table headers as well. I would like them (headers) to be fixed while the tables rows are scrolled vertically.

    I was experimenting with few properties available in sapui5 table component but couldn’t get the proper results. Any suggestions please.

    Regards,

    (0) 
  5. Janaki Raman

    Hi Michael

    Thanks for sharing great examples on SDK, I managed to integrate Fusion Charts into Design Studio 1.2.

    However for some reasons, I wanted to access the component property newInstancePrefix (As in Contribution.xml) in the component.js file that am unable to do.

    Would like to access all properties associated with Element <component> .

    Could you please suggest.

    (0) 
      1. Sukanya Krishnan

        Hi Michael, I am new to SAP UI5 components,

        Have a requirement to read XML file and load data into table component.

        Usage is, based on item selected in dashboard I want to display its description. The description does not come from BW query but from XML file.

        Can you please help me with this?

        (0) 
      2. Janaki Raman

        Hi Michael

        Here is my contribution.xml (Note I have multiple comopnents, take 1 component as an example “Angular Gauge”)

        My requirement is to eliminate the property Graphins and replace it with the component Instance. (This will help me add multiple instances of same graph object more elagantly. by Manually supplying value of Graphins, this code still works).

        Check my this.afterUpdate() code where I derive the unique value for SPAN Tag.

        Hope these 2 files alone helps. Thanks for your time.

        ===============Contribution Xml============>

        <?xml version=”1.0″ encoding=”UTF-8″?>
        <sdkExtension xmlns=”http://www.sap.com/bi/zen/sdk
        title=”Fusion Charts”
        version=”1.0″
        vendor=”Sample Company”
        id=”com.fusion.charts”>
        <component id=”MCosttype”
          title=”Two-Series Charts”
          icon=”res/icon.png”
          databound=”true”
          handlerType=”div”
         
          propertySheetPath=”res/additional_properties_sheet/additional_properties_sheet.html”>

          <jsInclude>res/js/component.js</jsInclude>
          <jsInclude>res/js/FusionCharts.js</jsInclude>
          <cssInclude>res/css/component.css</cssInclude>

          <property id=”color” type=”Color” title=”Color” group=”Display” />
          <property id=”Graph” type=”ResultCellSet” title=”Series” group=”Display” />
          <property id=”objwd” type=”String” title=”Width” group=”Display” />
          <property id=”objht” type=”String” title=”Height” group=”Display” />
          <property id=”Graphins” type=”String” title=”Instance” group=”Display” />
          <property id=”onclick” type=”ScriptText” title=”On Click” group=”Events” />

          <initialization>
           <defaultValue property=”WIDTH”>200</defaultValue>
           <defaultValue property=”HEIGHT”>100</defaultValue>
           <defaultValue property=”color”>White</defaultValue>
           <defaultValue property=”Graphins”>1</defaultValue>
           <defaultValue property=”objwd”>400</defaultValue>
           <defaultValue property=”objht”>350</defaultValue>
          </initialization>
        </component>
        <component id=”MCcomparitive”
          title=”Multi-Series Charts”
          icon=”res/icon.png”
          databound=”true”
          handlerType=”div”
         
          propertySheetPath=”res/additional_properties_sheet/additional_properties_sheet.html”>

          <jsInclude>res/js/component_comp.js</jsInclude>
          <jsInclude>res/js/FusionCharts.js</jsInclude>
          <cssInclude>res/css/component.css</cssInclude>

          <property id=”color” type=”Color” title=”Color” group=”Display” />
          <property id=”Graph” type=”ResultCellSet” title=”Series” group=”Display” />
          <property id=”objwd” type=”String” title=”Width” group=”Display” />
          <property id=”objht” type=”String” title=”Height” group=”Display” />
          <property id=”Graphins” type=”String” title=”Instance” group=”Display” />
          <property id=”onclick” type=”ScriptText” title=”On Click” group=”Events” />

          <initialization>
           <defaultValue property=”WIDTH”>200</defaultValue>
           <defaultValue property=”HEIGHT”>100</defaultValue>
           <defaultValue property=”color”>White</defaultValue>
           <defaultValue property=”Graphins”>1</defaultValue>
           <defaultValue property=”objwd”>600</defaultValue>
           <defaultValue property=”objht”>400</defaultValue>
          </initialization>
        </component>
        <component id=”Box”
          title=”Angular Gauge”
          icon=”res/icon.png”
          handlerType=”div”
          propertySheetPath=”res/additional_properties_sheet/additional_properties_sheet.html”>

          <jsInclude>res/js/component_gauge.js</jsInclude>
          <jsInclude>res/js/FusionCharts.js</jsInclude>
          <cssInclude>res/css/component.css</cssInclude>

          <property id=”color” type=”Color” title=”Color” group=”Display” />
          <property id=”Graph” type=”String” title=”Gauge” group=”Display” />
          <property id=”Graphins” type=”String” title=”Gauge Instance” group=”Display” />
          <property id=”objwd” type=”String” title=”Gauge Width” group=”Display” />
          <property id=”objht” type=”String” title=”Gauge Height” group=”Display” />
          <property id=”onclick” type=”ScriptText” title=”On Click” group=”Events” />

          <initialization>
           <defaultValue property=”WIDTH”>200</defaultValue>
           <defaultValue property=”HEIGHT”>100</defaultValue>
           <defaultValue property=”color”>White</defaultValue>
           <defaultValue property=”Graphins”>1</defaultValue>
           <defaultValue property=”objwd”>200</defaultValue>
           <defaultValue property=”objht”>100</defaultValue>
             </initialization>
        </component>
        </sdkExtension>

        ======================Component_gauge.js===================

        sap.designstudio.sdk.Component.subclass(“com.fusion.charts.Box”, function()
        {
        var that = this;
        this._ins =””;
        this._gval=””;
        this._wd =””;
        this._ht=””;
        this.mycht=”;
        this.init = function()
        {
          this.$().addClass(“Box”);
          this.$().click(function() {
           that.fireEvent(“onclick”);
          });
        };
        this.color = function(value)
        {
          if (value === undefined) {
           return this.$().css(“background-color”);
          } else {
           this.$().css(“background-color”, value);
           return this;
          }
        };
        this.Graphins = function(value)
        {
          if (value===undefined ) {this._ins=”1″;}
          else {this._ins=value;};
          return this;
        };
          
        this.Graph=function(value)
        {
          if (value===undefined) {this._gval=”50″;}
          else {this._gval=value;};
          return this;
        };

        this.objwd = function(value)
        {
          if (value===undefined ) {this._wd=”200″;}
          else {this._wd=value;};
          return this;
        };
        this.objht = function(value)
        {
          if (value===undefined ) {this._ht=”100″;}
          else {this._ht=value;};
          return this;
        };
          

        this.afterUpdate=function()
        {
           var x1=this.owner;
           alert(sap.designstudio.sdk.Component.getName());
          // var mycht = new FusionCharts(“AngularGauge.swf”, “Gauge”,  “200”, “100” , “0”, “1”);
        var mycht = new FusionCharts( {swfUrl: ‘AngularGauge.swf’,  width: this._wd,   height: this._ht,  debugMode : false});
          

        this.$(‘sapbi_snippet_ROOT’).append(‘<span id=’+”gj”+this._ins+’ class= “Gauge” ></span>’);
          var mystr=”<chart gaugelowerLimit=’0′ upperLimit=’150′ lowerLimitDisplay=’Good’ upperLimitDisplay=’Bad’ gaugeStartAngle=’180′ gaugeEndAngle=’0′ palette=’1′ numberSuffix=’%’ tickValueDistance=’10’ showValue=’1′>”
            +”<colorRange><color minValue=’0′ maxValue=’89.9′ code=’F6BD0F’ />”
               +”<color minValue=’90’ maxValue=’110′ code=’8BBA00′ />”
               +”<color minValue=’111′ maxValue=’150′ code=’FF654F’ />”
               +”</colorRange>”
               +”<dials><dial value ='” + this._gval +”‘ rearExtension=’10’/></dials></chart>”;
           mycht.setDataXML(mystr);
           mycht.render(“gj”+this._ins );
        };

        this.componentDeleted = function()
        {
          this.$().removeClass(“Box”);
        };

        });

        Regds

        (0) 
        1. Mike Howles Post author

          I believe this has to do with the ID of your span tag, at least in part.

          It doesn’t look like you ever set this._ins so the span ID will be identical with 2 instances of this component.  I see where your Graphins property function possibly would set it, but this is not guaranteed to occur in the order you’d think it would for afterUpdate.

          A better way would be to get the id of the component which is available to you to keep your IDs distinct.  You can get the ID that the DS SDK sets for you by saying:

          var myID = this.$().attr(“id”);

          Then you could use that as part of the ID string you are setting on your span.

          Try that out instead of relying on setting a this._ins.

          (0) 
          1. Janaki Raman

            Hi Michael

            Thanks for your suggestion, this is exactly what I was missing and looking for.

            My new code works with this.$().attr(“id”).

            Thanks for your time, I really appreciate.

            Regds

            (0) 
  6. Harald Anton Mueller

    Hi Michael,

    thanks for sharing your experience.

    Do you have an idea how to convert this “simple” table into a more crosstable look and feel? Especially I would like to see the dimensions you display as “concatenated dimensions” in speparate columns and have the calmonth shown only once vertically centered for multiple detail rows (exactly like in the standard crosstab). Do you know how to do that? The SAP UI 5 docs do not show if and how this is possible…Thanks!

    Regards,

    Harald

    (0) 
    1. Mike Howles Post author

      Harald,

      If I still had the example project (or the time) to share, I would, but my short answer is yes, you have everything needed to change from a concatenated dimension column to individual columns.  Basically you would change the concatenated code logic around lines 55-59 to create new SAPUI5 Columns for each dimension instead of adding together one string.  It’s not hard to do, but would be a good exercise for you to work through to learn SAPUI5!

      (0) 
      1. Harald Anton Mueller

        Michael,

        thanks for your response. I played a bit with it. The only think that does not seem to be possible with the SAPUI5 Table is doing a row grouping in one column (displaying only one entry in e.g. the first column vertically centered over more than one row). Or do you have idea how to solve that?

        (0) 
        1. Mike Howles Post author

          I see where you are going, now.  You want it to appear more like a Pivot Table (BEx/Analysis/Excel Pivots).  You’d probably need to consider extending sap.ui.table.Column with a custom class to do that type of logic.  There’s also a setGrouped method on the Column class but I never got it to behave the way I wanted it to.  I’d consider just extending sap.ui.table.Column to fit your needs.

          (0) 
          1. Harald Anton Mueller

            Yes. In fact I want to have something like the standard design studio crosstab, but with configurable no. of fixed rows on top and fixed columns on the left hand side.

            As SAPUI5 table has methods to do this, I was up to using it for that purpose. But now I am hitting the wall in diplaying a pivot table look.

            What you say sounds good, but as I am not that experienced with extending components of SAPUI5, I don’t know how to achive this… Any more hints?

            (0) 
  7. Arun Varadarajan

    Michael,

    I tried using the code you had given – but then I am having a tough time with the data binding. I then tried the plain vanilla simple table example and imported the same – but then I am not able to specify columns for the extension. Any Idea why …?

    I get the prompts to select column but am unable to select anything here.

    column select simpletable.JPG

    I did notice that I can type in the column instead of selecting it but I dont have any example. Not sure if I have to try importing the same again .

    (0) 
    1. Mike Howles Post author

      I do not see any Measures in your results.  Either that, or the 3rd and 4th columns are so wide, that you are unable to see the rest, and for some reason, there is no scrollbar.  This is an SAP dialog box, no SDK control over that.  Can you remove the long columns and make sure you actually have measures in your result set?

      (0) 
      1. Arun Varadarajan

        Michael,

        That worked … I reduced the columns and was able to select.

        What I am trying to do here is to have a query with three columns and trying to concatenate them into one column. There is a requirement to show comments by users and am trying to find the lengths available to me before I commit to the users in terms of restrictions.

        For this – I was planning on using the simple table component and in the appendcell function – concatenate the values in the columns into column1.

        Is this the best way to do this or is there any other way.

        (0) 
        1. Mike Howles Post author

          I think there are many approaches you could take, and as I’m sure you’d agree, the devil is in the details and requirements.  I say that, because while I’m sure you could modify this SAPUI5 Table control to suit your needs, if you really want/need to.

          A differing perspective would be to think about it this way: if you are dealing with large fields, a Table component may not always be the best approach to pack this amount of data in.  You could certainly try and see how it looks, however if it were me, I’d probably remember some dashboard principles of less is more and think about how you could perhaps offer up a summarized, or shortened, amount of the information in the table, so that is manageable, and then you could also put in an on click handler to expand out on a given row, the more detailed, and text-heavy information.  My example gets you most of the way there, but then you’d simply need to expose a few additional properties to complete this functionality.  (If this is even at all a more appealing approach) — Again – the devil is in the details 🙂

          (0) 
  8. Arun Prasad

    Hello Micheal,

    This is a really helpful post. I have installed my eclipse and able to run the custom component in Design studio. I was wondering how do I install the API for getting the methods and functions related the “Resultcell” of “Databinding” group within the eclipse IDE and other standard API functions for Jquery, jtable etc

    for e.g.  meta_data.dimension[I].members.[selectionIndex].text to get the value of a given cell within a loop.

    Please let me know if more clarification needed.

    Thanks

    Arun

    (0) 
  9. amit saini

    Hi Micheal,

    This is really helpful and informative post.

    Right now I am facing some issue in cross-tab.

    My requirement is , on click of any cell in cross-tab i want to convert  it into editable cell.

    Converting into editable cell is something which I achieved using below code:

    ———————————————————————————————————————-

    function onCellClick(e) {

      —

      —

      var text=this.innerHTML;

      var text = $.trim(this.innerHTML);

             $(‘<input />’).attr({ type: ‘text’, name: ‘text’ }).appendTo($(this)).val(text).select().blur(

            function () {

                var newText = $(this).val();

                $(this).parent().text(newText).find(‘input’).remove();

                var rIndex=$(this).closest(‘tr’).index();

                data.data[rIndex]=newText;

                that.firePropertiesChanged([“data”]);

                //that.firePropertiesChanged([“visSelection”]);

        that.fireEvent(“onSelect”);

            });

      }

    ———————————————————————————————————————–

    I just modified the sample code.

    Now I want to update the Dataset with this updated value.

    Can you please provide any help on the same?

    Thanks

    Amit

    (0) 
    1. Mike Howles Post author

      You may want to post this as a new discussion question to get more attention, however my initial reaction to your requirement would be to look at Integrated Planning (supported in DS 1.3) and see if it is a fit.

      (0) 
  10. Arun Prasad

    Hello Michael,

    I am trying to use the “grouped: true” property in the add column sap.ui.table.Column and it fails to load the column.

    Is Column or row grouping not supported in the SAP UI5 table control?

    Thanks

    Arun

    (0) 
    1. Mike Howles Post author

      I believe the grouping functionality is labeled experimental in the online API documentation for UI5, and I have no idea if it even existed in the 1.12.7 version that DS 1.2 has – You may have better luck in the DS 1.3 version that carries UI5 1.18, but I’ve not bothered to go back and try.

      (0) 
  11. Arun Prasad

    Hello Michael,

    I have 2 custom components based on SAPUI5 table control and have a external CSS file associated to each component. Is there any way to make the CSS unique to the table in the component based on id or something? I tried the below option but it doesn’t work

    component.js

    prockpi_menu_table = new sap.ui.table.Table({ //title:”Order To Cash”, id: “prockpi_menu_table”, width:”100%”, height: “100%”, visibleRowCount: 5, editable: false, enableColumnReordering: false, selectionMode: sap.ui.table.SelectionMode.Single, rowSelectionChange : this.rowChanged // columnSelect : this.columnChanged });

    table.css

    #prockpi_menu_table.sapUiTable #prockpi_menu_table.sapUiTableRowHdr, #prockpi_menu_table.sapUiTable #prockpi_menu_table.sapUiTableTdFirst, #prockpi_menu_table.sapUiTableCtrlScr{ font: normal 9px Segoe UI; border: 0.5px; color: #000; background: #CCC none; border-bottom:1px solid #96a8c3;border-right: none; border-left: 1px solid #96a8c3; }

    Thanks

    Arun

    (0) 
    1. Mike Howles Post author

      That would not be the ID of your design studio component necessarily.  Why not just use UI5’s addStyleClass to the component and use CSS class selectors instead of IDs?

      Also, you may wish to ask your question in a new discussion topic so that it gets more attention.

      (0) 
  12. Daniel Scheiner

    Hi Michael,

    I am trying to enhance the simplecrosstab as you did with the simpletable:

    Currently the simplecrosstab returns the value and dimension of a selected cell (onselect()).

    I need to change this behaviour so I get the selected dimension and value as well as the dimension(s) and their values –> i.e. if I have YEAR | MONTH | DAY | KYF  and I click on month – I need this value as well as the year in the JSON-result.

    Did you try enhancing the simplecrosstab like this before?

    Thanks and best regards,

    Daniel

    (0) 
    1. Mike Howles Post author

      That’s a pretty good use case actually.  Basically you want a means to return the value of a clicked cell, along with whatever the dimensions (and their values) are on the row and column axes, right?

      I started ‘clean’ with a new table component (blog coming soon on it) that renders the table using D3 instead of SAPUI5 but perhaps I’ll add an example of how to do this there.

      I’m surprised you got their simplecrosstab SDK sample to work?  I’ve had troubles with it myself.  Do you have a sample out on Github?

      (0) 
      1. Daniel Scheiner

        The crosstab sample works in v1.4.

        I’m currently working on it – right now the behaviour is eradic. =)

        Once I got this working I will need to enable

        – filtering funcionality (currently not working),

        – 2 header rows (currently only one which creates problems with typical query results),

        – etc…

        I will post an update once I get a part of this to run.

        (0) 
      2. Daniel Scheiner

        Hi Michael,

        so far all attempts to get this information have been unsuccessful…

        We would need the data.tuples index information – but it seems we only get the dimension and entry index of whatever field we click on.

        Do you know of a way to get the row-information in the crosstab?

        Also – I have tried the SIMPLETABLE example – but I do not get individual dimensions.

        Happy new year!

        Daniel

        (0) 
        1. Mike Howles Post author

          No strong reason, aside from I’ve already done a table in SAPUI5 and wanted to do a leaner version.  Source code here highlighted:

          sdkpackage/Table2D.js at master · org-scn-design-studio-community/sdkpackage · GitHub

          Also SAPUI5 versions have changed on use since 1.2 a few times.  It was 1.12, then 1.18, and now 1.22 — Sometimes look and feel and behavior changes in these components change slightly.  Even in the Blue Crystal CSS theme for example we had subtle changes from 1.3 to 1.4.

          Also I just wanted a reason to try to get more comfortable with D3 conventions.

          (0) 
            1. Mustafa Bensan

              Hi Daniel,

              You can change the look of the standard Crosstab component through CSS but it is not possible to modify it’s functionality using the SDK.  Standard Design Studio components cannot be enhanced with the SDK.

              Regards,

              Mustafa.

              (0) 
  13. Mubarak A

    Hi Micheal,


    Is there any other way to do this (myUI5Table.placeAt(this.$()); // Until SAP gives us an official way..)..?


    if we have can you please share any reference.  ..?


    Thanks in advance


    (0) 

Leave a Reply