Category: Client-Programming

Wondered, how expandable Tiles work in smartUI?

The base Widget is a simple Tile:

Pressing the Expand Button (lower right) shows a different view with more details as a list:

Implementation:

For simplicity sake, all require.js setups are omitted. The complete javascript would run on a simple html page without connecting to Server.

First, we need a collection and a model. The model does have 3 attributes, name, desc, adv. 30 Models are filled automatically in the collection.

     var  ItemModel = Backbone.Model.extend({
              defaults: {
                  id: null,
                  name: 'Unnamed',
                  desc: 'Unnamed',
                  adv: 'Unnamed'
              }
          }),

      ItemCollection = Backbone.Collection.extend({
              model: ItemModel,
              initialize: function (models, options) {
                  this._items = _.times(30, function (index) {
                          ++index;
                          return {
                              id: index,
                              name: 'Item Entry No.' + index,
                              desc: 'the ' + index + 'th. Description',
                              adv: 'the adv attribute of the ' + index + '-Description Model'
                          };
                      });
                  this.makeFetchable(options)
                  .makeClientSideBrowsable(options);
              },
              sync: function (method, collection, options) {
                  if (method !== 'read') {
                      throw new Error('Only fetching the collection is supported.');
                  }
                  console.log('Getting', collection._items.length, 'items');
                  var deferred = $.Deferred();
                  setTimeout(function () {
                      var response = _.clone(collection._items);
                      if (!options) {
                          options = {};
                      }
                      if (options.success) {
                          options.success(response, options);
                      }
                      collection.trigger('sync', collection, response, options);
                      deferred.resolve(response);
                  }, 250);
                  return deferred.promise();
              }
          }),

Second, we need two views, a base view and an expanded view.

The base view with its template is:

      ListItemView = Marionette.ItemView.extend({
              className: 'binf-list-group-item',
              template: Handlebars.compile($('#list-item-template').html())
          }),
 

script id="list-item-template" type="text/x-handlebars-template"
  {{name}} 
/script

<> around the script tags are omitted

The extended view with its template is

ListFieldItemView = Marionette.ItemView.extend({

                  className: 'binf-list-group-item',

                  template: Handlebars.compile($('#list-item-template1').html()),

                  initialize: function () {

                      this.listenTo(this.collection, 'sync', this.render);

                      this.collection.fetch();

                  },

                  serializeData: function () {

                      if (!this.model && !this.collection) {

                          return {};

                      }
                   var args = [this.model || this.collection];
                  if (arguments.length) {
                      args.push.apply(args, arguments);
                  }

                  if (this.model) {
                      return this.serializeModel.apply(this, args);
                  } else {
                      return {
                          items: this.serializeCollection.apply(this, args)
                      };
                  }
              },
          }), 

script id="list-item-template1" type="text/x-handlebars-template"
   {{#each items}}
      p class="items"a href=#{{name}}  ----     {{desc}}---{{adv}}/a/p
  {{/each}}
/script

<> brackets around the html and script tags are omitted

The serialize function is used to make the collection renderable with handlebars.js. This and item-template1 will render to this expanded view:

We also need one base view, referencing our two views, one as contentview and one as expandedView. We add the Behavior Expanding with the options with our collection set. And of course, with several title and icon options set.

     ListTileView = TileView.extend({
              icon: 'header-openfolder',
              title: 'Reiners expandable Tile Entries',
              contentView: ListView,
              contentViewOptions: function () {
                  return {
                      collection: this.items
                  };
              },
              childEvents: {
                  'click .items': 'onClickItem'
              },
              onClickItem: function (target) {
                  this.trigger('click:item');
                  this.triggerMethod('execute:defaultAction', target.model);
                  alert("Clicked on item '" + target.model.attributes.name + "'");
              },
              behaviors: {

                  Expanding: {
                      behaviorClass: ExpandingBehavior,
                      expandedView: ListFieldItemView,
                      expandedViewOptions: function () {
                          return {
                              collection: this.contentView.collection
                          };
                      },
                      titleBarIcon: 'title-assignments',
                      dialogTitle: 'Reiners Special Tile expanded Details',
                      expandIconTitle: 'Reiners Expand Button',
                      dialogTitleIconRight: "icon-tileCollapse"
                  }
              },
              constructor: function (options) {
                  ListTileView.__super__.constructor.apply(this, arguments);
                  this.items = new ItemCollection(undefined, {
                          top: 30
                      });
                     // options.items = this.items;
              },
              onShow: function () {
                  this.items.fetch();
              }
          });

Initialize it and show it at the el #tile. Then you are done

      var
      // Create instances of the views to show on the page
      tileView = new ListTileView(),

      // Create helpers to show the views on the page

      tileRegion = new Marionette.Region({
              el: "#tile"
          });

      tileRegion.show(tileView);

Easy, isn’t it?

The complete html file containing the javascript demo code can be downloaded here

This is a control in smartUI. Basic infos are:

This control uses the command:

–lib\src\csui\utils\commands\zipanddownload.js

Requires:

“module”, “require”, “csui/lib/underscore”, “csui/lib/jquery”, “i18n!csui/utils/commands/nls/localized.strings”, “csui/utils/command.error”,   “csui/utils/commandhelper”, “csui/models/command”, ” csui/utils/url ”   

Triggered, when more than 1 file is selected. Action.ID = “zipanddownload« 

Uses ‘csui/controls/globalmessage/globalmessage’,         “csui/models/zipanddownload/zipanddownload.preflight”,         “csui/models/zipanddownload/zipanddownload.stages”,         “csui/dialogs/modal.alert/modal.alert”  in local require.

Uses REST Calls. To use the command, these REST calls must exist on the Content Server side.

• Post api/v2/zipanddownload with body={” id_list”:[oids zu compress],”type” : “zipanddownload ” 
  • Returns in results/data/jobs/id the oid of the archive to download
• Post api/v2/zipanddownload/oid to download the compressed archive

Simply put the command in a place where your menu options are. Typically in a toolbar config like

/* Example where to put the command

define([

        'module',

        "csui/controls/toolbar/toolitem.model",

        'csui/controls/toolbar/toolitems.factory',

        'i18n!conws/utils/commands/nls/commands.lang'

    ], function (module, ToolItemModel, ToolItemsFactory, lang) {

var toolbarItems = {
    otherToolbar: new ToolItemsFactory({

        first: [{
                signature: "AddParticipant",
                name: lang.CommandNameAddParticipant,
                icon: "binf-glyphicon binf-glyphicon-plus"
            },
            {
                signature: "YourCommand",
                name: "YourCommandname",
                icon: "Your Binf-Glyphicon"
            },
            {
                signature: "PrintParticipants",
                name: lang.CommandNamePrintParticipants,
                icon: "binf-glyphicon binf-glyphicon-print"
            }, {
                signature: "ExportParticipants",
                name: lang.CommandNameExportParticipants,
                icon: "binf-glyphicon binf-glyphicon-download"
            }, {
                signature: "ShowRoles",
                name: lang.CommandNameShowRoles
            }, {
                signature: "RemoveParticipant",
                name: lang.CommandNameRemoveParticipant
            }

        ],
        second: [
        ],
        third: [
        ]
    }, {
        maxItemsShown: 99,
        dropDownIcon: "icon icon-toolbar-more"
    })

};

return toolbarItems;

});