Display the JSON List into widget as column headers and data in a grid and search specific columns

Dear All,

I use Smart UI sdk and able to create a hello widget in perspective manager to show the logged in user first name and last name.

I need to modify this widget to display a database table columns. I created a request handler to return json response of the table data. Using the widget i am able to fetch the data in the model.

But i want to display that model data in a grid format by adding search columns to some of the table columns.

If anyone does this please provide a sample code to display the json response in a grid format by adding search capabilities to the desired columns.

I added the widget code and json response i am getting. unzip attached inside bundles there is a legaltasks-all.js file is there which is responsible for displaying the widget data.

Please help me with the sample code to update the hbs div content element.

If i alert this var message = this.model.get('data') i am getting the data of the json objects array but i want to display this objects response in a formatted manner in the div id="content" in the hbs file.

Please let me know if you need any information on this. I don't want to use webreports to display this information. I want to achieve it by customization way.

Thanks in advance for your help.

legaltasks.zip

jsonresponse.txt

Find more posts tagged with

Comments

Pramod Mohandas

If I’m not wrong, if the only purpose of this customization was to display data in a columnated design, why didn’t you try out the responsive WR template to display columns instead? Are you trying to achieve something else?

WR template – widget_html_report_responsive_table_sample.html

Ferdinand Prantl

There is no sample showing data in a table in the SDK. If you want to create a table using Marionette, you can have a look at the description of childViewContainer in Marionette.CompositeView to see an example, how to render a table. Or you can have a look at a simpler table using just one view, which I wrote below.

You already can fetch data from the server; just fetch it to a collection, because it is an array. You would fetch a single object to a model.

I noticed, that you call "csui.define" in you JavaScript modules. It should be just "define". The namespace "csui" is added during the build. Have a look at the generate hello widget sample.

Let me show an example of the complete widget "legal.tasks". "table.view.js" and "table.hbs" is a simple table control. I assume, that you would implement "tasks.factory", which creates a collection fetching the data, that you attached. "legal.tasks.view.js" and "legal.tasks.manifest.json" implement the widget using the table control.

src/widgets/legal.tasks/impl/table.view.js:

  define(['csui/lib/marionette', 'hbs!ltasks/widgets/legal.tasks/impl/table'  ], function (Marionette, template) {    'use strict'    var TableView = Marionette.ItemView.extend({      tagName: 'table',      className: 'binf-table binf-table-striped binf-table-hover',      template: template,      constructor: function TableView(options) {        Marionette.ItemView.prototype.constructor.call(this, options);        this.listenTo(this.collection, 'sync', this.render);      },      serializeData: function () {        return {          columns: this.options.columns.toJSON(),          items: this.collection.toJSON()        };      }    });    return TableView;  });

src/widgets/legal.tasks/impl/table.hbs:

  <thead>    <tr>      {{#each columns}}        <th>{{name}}</th>      {{/each}}    </tr>  </thead>  <tbody>    {{#each items}}      <tr>        {{#each ../columns}}          <td>{{lookup ../this id}}</td>        {{/each}}      </tr>    {{/each}}  </tbody>

src/widgets/legal.tasks/legal.tasks.view.js:

  define(['ltasks/widgets/legal.tasks/impl/table.view',    'ltasks/widgets/legal.tasks/impl/tasks.factorey'  ], function (TableView, LegalTaskCollectionFactory) {    'use strict'    var columns = [      {id: 'CTaskName', name: 'Task'},      {id: 'CPriority', name: 'Priority'},      {id: 'CStatus', name: 'Status'},      {id: 'CEDate', name: 'End'},    ];    var LegalTasksView = TableView.extend({      constructor: function LegalTasksView(options) {        options.columns = new Backbone.Collection(columns);        options.collection = options.context.getCollection(LegalTaskCollectionFactory);        TableView.prototype.constructor.call(this, options);      }    });    return LegalTasksView;  });

src/widgets/legal.tasks/legal.tasks.manifest.json:

  {    "$schema": "http://opentext.com/cs/json-schema/draft-04/schema#",    "title": "Legal Tasks",    "description": "Shows list of legal tasks in a table.",    "kind": "fullpage",    "schema": {      "type": "object",      "properties": {}    }  }

The code above renders the table on the screenshot.

Selection_062.png

Meerasaaheb_Mohmmad

thanks for your valulable feedback.

May i know what is this? and if possible can you share me the zip containing working solution."$schema": "http://opentext.com/cs/json-schema/draft-04/schema#",

Ferdinand Prantl

The "$schema" property points to the URI of the Widget Manifest as of a JSON Schema document. See http://json-schema.org/latest/json-schema-core.html#rfc.section.6 for more information.