Blog

Posted on

New smartUI Training for Content Server 16.2.8

The actual Content Server release 16.2.8 brought a lot of improvements to the smartUI SDK, for example the xECM and the connected Workspaces Widgets are nowadays part of the SDK.

Also a lot of of people were interested in smartUI, not only Developers.

So we introduced an updated 5 days training to reflect the changes of 16.2.8 and a 2 days training to provide an overview of the SDK. Naturally, a 5 days training gives more information and also more exercises than a 2 days training, but this 2 days training can provide a good overview for Team Leaders and technical Managers.

For those with little time, there is also a 1 day training giving you a more compact overview for technical Managers and technical Evangelists. The one day training is not recommended for Developers. This training was held at the Enterprise World in Vienna 2019.

Whats new in the trainings?

New in the basic training

The Chapter 6 (SDK Intro) (5 days training Basic)

  • 6.1 Introduction
  • 6.2 Installing the SDK. Different Installations in 16.2.4 and 16.2.8. (NEW)
  • 6.3 Building the Demo Widget
  • 6.4 CSS Style Overrides Binf (OpenText Bootstrap Version)
  • 6.5 General Overview
    • General Overview
    • General Architecture, Coding Guidelines
    • Logging, Internationalization and Localization
  • 6.6 Content of the SDK
  • 6.7 Routing Preview (see adv. Training for a more detailed discussion)
  • 6.8 New Command
  • 6.9 Custom Column
  • 6.10 Metadata
  • 6.11 Define a new Nodetype
  • 6.12 Create a Widget
  • 6.13 Base Widgets. Detailed info’s on base widgets.
    • Favorites
    • Recently Accessed
    • MyAssignments
    • Shortcut
    • Shortcuts
    • Metadata
    • NodesTable
    • DocumentOverview
    • Search Results (NEW)
    • Permissions (NEW)
    • Html.editor (NEW)
    • Navigation Header (NEW)
  • 6.14 Controls and Contexts
    • Controls
      • Node Picker
      • Modal Alert
      • File Open
      • Perspectives: Grid, Single, Left-Center-Right, Tabbed, Tabbed-Flow
      • Tile
      • ListView
      • ListItem
      • Signin
      • UserPicker
      • Breadcrumps
      • Checkbox
      • Dialog
      • Disclosure (NEW)
      • Error (NEW)
      • Form (NEW)
      • Globalmessage (NEW)
      • Grid (NEW)
      • Zip&Download (NEW)
      • Integration Folder Browser
      • Integration Target Picker
    • Contexts
      • Detached objects
      • Permanent objects
      • Temporary objects
      • Page Context
      • Browsing Context
      • Perspective Context
      • Portal Context
  • 6.15 Models and Factories
    • NodeModel
    • Other Models
    • Factories
      • Fetchable Factory
      • Configurable Factory

A new Chapter 12 discusses the strategys needed to “widgedize” an existing legacy g module and to add things to an existing widget

The strange word “to widgedize” stands for “Build a widget for a legacy module not already supporting widgets”. The Strategies on amending a Module by adding a widget and on adding additional functionality inside an existing widget are discussed.

Content:

  • Moving from a legacy gui module to a smartUI module
    • Examine a legacy module and rebuild a smartUI widget (here only on the client side)
    • As an example, the barcode widget
  • Add a functionality in an existing widget
    • Add an email functionality in the Connected Workspaces Team Widget.
    • Usable from inside the Widget
    • As an example the new team widget with email Support

New in the advanced training

The advanced training will eventually grow more and more to cover the new widgets and controls coming in future releases.

Chapter 1: Extended SDK Parts

  • Additional Widgets
    • Webreports
      • NodesListReportView
      • TilereportView
      • FilteredCountChartView
      • Carousel Widget View
      • parameter.prompt.form (NEW)
      • table.report (NEW)
      • status.screen (NEW)
      • open.webreport.js (action to show the Parameters form) (NEW)
  • binf-Datepicker
    • Using the build in datepicker
  • binf-switch
    • Using the binf-switch to turn checkboxes and radio buttons into switches
  • Workflow
    • Workflow Components
    • Workflow in smartUI including Workflow Status (new in 16.2.4)
    • Starting Workflows
    • URL Routes
    • Workitem Model
    • Workitem Actions
    • Workitem Extension
    • Writing Workflow Extensions
    • REST API Support for Workflows
  • Connected Workspaces
    • Configurationvolume (NEW)
    • Header (NEW)
  • Extended ECM
    • xECM: Office365 Groups (NEW)
    • xECM: Header Widget with Business Object Infos (NEW)
    • xECM: Snapshot of current document Attachments (NEW)
    • xECM: Dossier View Widget (NEW)
    • Event Action Center (NEW)
  • Widgets not part of the SDK
    • Mobile Scanning
    • Discussion Widget
    • Engineering Doc Management: Search
    • MyShares

The chapter 3 has also been amended

  • Tips and Tricks (Work in Progress- List can change)
    • Add a OTDS Ticket already in the browser to the connection object
    • Re-using a OTDS Ticket as LLCookie
    • Checking the paths in the test/index.html
    • Adding non CSUI supported jQuery functions in a view
    • Add additional jQuery Libraries
    • Adding Controls to a widget (NEW)
    • CKEDITOR 4 (NEW)
      • Intro (NEW)
      • JQuery Non SDK example (NEW)
      • Usage in the SDK (NEW)
    • Handlebars advanced
      • Handlebars QuickStart
      • Expressions
      • Helpers
      • Helpers with html output
      • Helpers with Hash Object
      • The Helper fn property
      • The helper inverse property
      • Partials
      • Helpers in the SDK
      • 188 Handlebar Helpers
    • LESS advanced
      • LESS installation
      • Using LESS variables
      • Using Mixins in LESS
      • Parametric Mixins
      • Guarded Mixins
    • Accessibility in Bootstrap. Screen reader support and what’s to change in the SDK to support screen readers for visual impaired users.
      • What is Accessibility
      • Kinds of Disabilities
      • Accessibility and the law
      • WAI-ARIA
      • ASSETS.CMS.GOV
      • PayPal Bootstrap Accessibility Plugin
      • Web Experience Toolkit WET
      • Other resources
    • Best Practices in smartUI development
      • Pre-Development Steps
      • Preparation Steps
      • Development Steps
      • Integration Steps
      • Documentation Steps
  • Development Infrastructure for security aware Organizations (NEW)
    • Recommendations what’s to do if the reloading of npm modules during the creation of a widget is not wanted (NEW)

The agendas are available as pdf here

  • 2 day Agenda the training with more details and more exercises
Posted on

Improved smartUI Webreport Usability

The usability of Webreports in smartUI has been improved. Now, you can, after starting a Webreport, edit the parameters of that report and receive feedbacks from the running Webreport. This makes a lot of fun!

Lets see, how this is done.

First a table.report widget can be used to list all data.

Click on a Webreport to start it

Then a Parameter Window opens. The Webreport can be startet by pressing the button “Run Webreport”

Webreport Parameters can be edited
Webreport Parameters can be edited

A feedback can be given from the Webreport like this

Running webreports can give Feedbacks to SmartUI
Running webreports can give Feedbacks to SmartUI

The table.report shows a Smart UI table based on the output of WebReports data. The WebReport used by this widget must be based on either the widget_table_report_process_data_in_webreport or widget_table_report_process_data_in_datasource default reportviews which use the INSERTJSON @TABLEREPORT directive. 

   // Create the data managing context
       var context = new PageContext(),
        sampleTableReportView = new TableReportView({
           context: context,
           data: {
             id: 24024,
             sortBy: "SubType",
             SortOrder: "ASC",
             columnsWithSearch: "SubType",
             titleBarIcon: 'mime_audio',
             title: 'Sample WebReports Table',
             header: true,
             swrLaunchCell: {
                 id: 12345,
                 iconClass: 'my-icon-class',
                 hoverText: 'Some hover text for my icon.'
             }, 
  parameters: [
                 {
                     name: 'myparm1',
                     value: 'val1'
                 },
                 {
                     name: 'myparm2',
                     value: 'val2'
                 }
             ]
           }
       }),
       // Create helpers to show the views on the page
       region = new Marionette.Region({
         el: "#content"
       });
 
       // Show the views on the page
       region.show(sampleTableReportView);
 
       // Fetch the WebReport output from the server to populate the tile with
       context.fetch();

The parameter window can be implemented like this (the xxxxxx is the node number for the webreport)

  var promptView,
         promptModel,
         contentRegion = new Marionette.Region({el: "#content"}),
         pageContext = new PageContext(),
         currentNode = pageContext.getModel(NodeModelFactory, {attributes: {id: xxxxxx}}),
         runWRModel = pageContext.getModel(PromptModelFactory, {
             attributes: {
                 node: currentNode
             }
         }),
         runWRController = new RunWRController(); 
         pageContext.fetch()
             .done(function () {
 
                 // We've got the page context, now get the runWRModel to see if there are parameters:
                 runWRController.getRunWRPreModel({
                     node: currentNode,
                     context: pageContext
                 }).done( function(){
 
                     // Build the prompt view and show it:
                     promptView = new PromptView({
                         context: pageContext,
                         model: currentNode,
                         promptModel: runWRController.runWRPreModel,
                         showBackIcon: false
                     });
 
                     contentRegion.show(promptView);
                 });
             })

A feedback is implemented by the status.screen control.

  require(['csui/lib/underscore', 'csui/lib/marionette', 'csui/utils/contexts/page/page.context',  'csui/utils/contexts/factories/connector',
   'csui/controls/globalmessage/globalmessage',
   'webreports/controls/status.screen/status.screen.view',
   'webreports/models/run.webreport.pre/run.webreport.pre.model',
   'webreports/models/run.webreport/run.webreport.model',
   './status.screen.mock.js'
   ], function (_, Marionette, PageContext, ConnectorFactory, GlobalMessage, StatusScreenView, WebReportRunModelPre, WebReportRunModel, WRMock) {
 
   var statusView,
   context = new PageContext(),
   connector = context.getObject(ConnectorFactory),
   region = new Marionette.Region({el: "#webreport-status-screen-demo"}),
   attributes = { id: xxxxxx },
   options = { connector: connector },
   WRRunPreModel = new WebReportRunModelPre(attributes, options),
   WRRunModel = new WebReportRunModel(attributes, options);
   WRMock.enable(); // Mockup for local tests
 WRRunPreModel
   .fetch()
   .done( function(){
 
 WRRunModel
   .fetch()
   .done( function(){
 statusView = new StatusScreenView({
   destinationModel: WRRunPreModel.destinationModel,
   executeModel: WRRunModel});
    region.show(statusView);
   })
   })
 
 });

Working with WebReports and SmartUI now makes a lot of fun!

Posted on

New RulesMatchingMixin in smartUI

Have you seen the new Rules matching Mixin in the smartUI? Its a great mixin, allowing you to implement a colloection of rule models which are supposed one model, which rules match the input object. This is a quite powerful functionality

The following example implements the selection collection

  • Container = true
  • Subtype = 144, 749
  • and is type = 144 is one of the mimetypes listed
  • and is type = 144 or mimetype startswith “image/” of equals “pdf/x-pdf”
  • and is type = 144 and mimetype = “text/plain”

If run, then the action of the appripriate node is returned. Only on the base of a rules Model!!

Can be implemented like this

  var NodeActionSelectingModel = Backbone.Model.extend({
    idAttribute: 'signature',
    defaults: {
     sequence: 100,
     signature: null
   },
   constructor: function NodeActionSelectingModel(attributes, options) {
     Backbone.Model.prototype.constructor.apply(this, arguments);
     this.makeRulesMatching(options);
   },
   enabled: function (node) {
     return this.matchRules(node, this.attributes);
   }
 });  
  RulesMatchingMixin.mixin(NodeActionSelectingModel.prototype);
  var NodeActionSelectingCollection = Backbone.Collection.extend({
    model: NodeActionSelectingModel,
    comparator: 'sequence',
    constructor: function NodeActionSelectingCollection(models, options) {
     Backbone.Collection.prototype.constructor.apply(this, arguments);
   },
    findByNode: function (node) {
     return this.find(function (model) {
       return model.enabled(node);
     });
   }
  }); 
  var nodeActions = new NodeActionSelectingCollection([
   {
     equals: {
       container: true
     },
     signature: 'Browse'
   },
   {
     equals: {
       type: [144, 749]
     },
     signature: 'Open'
   },
   {
     and: [
       equals: {
         type: 144
       }, 
  containsNoCase: {
         mime_type: [
           "application/msword",
           "application/vnd.ms-word",
           "application/vnd.msword",
           "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
           "application/vnd.wordprocessing-openxml",
           "application/vnd.ces-quickword",
           "application/vnd.ms-word.document.macroEnabled.12",
           "application/vnd.ms-word.document.12",
           "application/mspowerpoint",
           "application/vnd.ms-powerpoint",
           "application/vnd.openxmlformats-officedocument.presentationml.presentation",
           "application/vnd.ces-quickpoint",
           "application/vnd.presentation-openxml",
           "application/vnd.presentation-openxmlm",
           "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
           "application/msexcel",
           "application/vnd.ms-excel",
           "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
           "application/vnd.ces-quicksheet",
           "application/vnd.spreadsheet-openxml",
           "application/vnd.ms-excel.sheet.macroEnabled.12",
         ]
       }
     },
     signature: 'Edit',
     sequence: 50
   }, 
  {
     and: {
       equals: {
         type: 144
       },
       or: {
         startsWithNoCase: {
           mime_type: 'image/'
         },
         equalsNoCase: {
           mime_type: ['application/pdf', 'application/x-pdf']
         }       }     },
     signature: 'Convert',
     sequence: 50
   },
   {
     and: [
             {
                equals: {
                       type: 144
                        }
              },
       {
         equalsNoCase: {
           mime_type: 'text/plain'
         }      }    ],
     signature: 'Read',
     sequence: 50
   },
   {
     signature: 'Properties',
     sequence: 200
   }
 ]); 
  var node = new NodeModel(...),
     action = nodeActions.findByNode(node);

Posted on

Changing the Business Workspace Display in SAP

Have you ever been wondering how to switch the Display of an Business Workspace displayed in xECM from the SAP GOS Menu?

Prefer the old display or the smart UI display?

The old Display of a Business Workspace

This is a Business Workspace displayed in the standard non-graphic form

This is a Business Workspace displayed using smartUI

Switching is easy.

Logon into your SAP System as Administrator. Start Transaction SPRO and click on the IMG Button.

The Display IMG Menu with the “Maintain Business Object Declaration” Task

Start the “Maintain Business Object Declaration” Task by clicking on the “Start” Icon. Select the Business Object you want to change. Here in this example is “KNA1” (Vendor).

If there is no checkmark at “Use Widgets for UI” then you’ll see the old display of the Business Workspace, if there is a checkmark, then the Business Workspace is displayed in smartUI.

Simple set or unset this checkmark.

Save. Update the tables.

Then you are done! The Display changes according to your setup.

You can also set this checkmark while creating new Business Object Declarations.

Posted on

Quick List of all Categories and Attributes in a Content Server

Looking for a quick list of all Categories and Attributes configured in a Content Server? Tired of browsing the Categories Volume? Want to see all attrobutes and their IDs in a list?

Easy.

Simple use this line as your URL

<server><OT base><cgi>?func=attributes.dump

(p.ex. http://myserver/myContentServer/cs.exe?func=attributes.dump)

This will return this list:

The attribute.dump output
The attribute.dump output

Although this is a screenshot from a Contentserver 16.2.6, you can use this command at least back to Version 10.5.

 

Posted on

The Cluster Manager is dead in Content Server 16.2.6 – Long live System Center Manager

In Content Server 16.2.6 the Cluster Manager is gone.

Whenever you try to open the Admin pages, you see this:

Admin Page 16.2.6

The new Entry “Cluster Management”

Install the System Center Software

First, you have to download and install the System Center Software. Clicking on the Link “Download Software” directly connects you the the Knowledge Center. After logging into this Knowledge Center, you’ll arrive at the  Landing Page for the System Center.

Knowledge Center “System Center Landing Page”

The System Center(s) are avaliable for Windows and for Linux servers. Select the proper version for your system and download it.

Install it.

You’ll find the System Center directly in the list of programs, like here in Windows Server 2012

Configure it

Double Click to start. Next, you’ll see the System Center Home Page

Like in the cluster management, you’ll need to download an agent per Content Server system and install that agent at that particular system – Click on Download and Install Agent.

(dont forget your local system!).

Next, you have to register the systems, onto which you just unstalled the agents. Go back to the “Home” of the System Center and click on “Register Systems”

Under “Managed Systems”, you see all systems already registered, under “Pendig systems” there are all systems with agents recognized by the System Center.

Click on the entry in the column “Actions” on the system pending, and you can register the agent. A Click will give you the detail view (here the system is already registered)

So you are nearly done!

Click on “Discover Products” for this particular system at the bottom of the page and the system is checked for all supported products and those installed are listed.

 

How to check for patches and install them?

Easy. Until now, you did the setup.

This has to be done only once.

Go back to the “Home” and click on “Check for Updates”

This will lead you to the “Products” tab with Updates for the registered product.

Either expand the “Avaliable Patches” entry and select the patches you want to install or select all by checking the checkbox at “Avaliable Patches”. Then click on “Download Selected” and see the system working.

First you need to login into Knowledge Center

Patch Download started

 

Press Close and you see the download window. As the download is done async, you see green marks (downloaded and installed) and also the moving circles (waiting for download or still in progress)

Download Window in System Center

 

It also provides a list of supported products by clicking “Catalog” from the “Home” page of the system Center

Catalog of supported products

The latest releases are listed directly in the calalog overview.

 

So the System center is much better then the Cluster Management doing updates.

 

 

 

 

 

 

 

 

 

Posted on

Using Webreports as Widget Alternative in smartUI

Widgets are controlled by perspectives, changing the data displayed in the widget requires a change of perspectives
When you restrict yourself to use only the standard REST command set, you’ll find that you fire a lot of REST commands
You lost the capability of using navigational menus with computed URLs.

This leads me to some thoughts towards webreports as an adddition to widgets.

Webreports used as widget surrogates do have this pros and cons.

Pros:
You can use standard bootstrap navigational menus and UI elements, which allows you to mimic your webreport like a widget.
You can easily build things like Wizards inside your webreport structures. This is interesting, when you require some complex categories setup at doc creation time.
Webreports can use different sources to diyplay things, all server based. You can add the complete output via asynchronous AJAX call directly in your hosting webreport.
You can start actions inside the surrounding smartUI using standard jquery and html selections.
Starting Webreports and inserting the output via AJAX makes things quite fast. Especially when you display more than 1 record.
You get the option of using normal menu structures w/o the requirement of changing the perspectives.
Its easy for experienced webreport developers to modify the menu structures and the contents of such a meta webreport.

Cons:
Storing Webreports in the database require an additional license.
You have to load jquery by yourself.
No access to binf.js, unless you build one binf library without the normal csui-hierarchy or load a plain bootstrap.js.
In the last case, you’ll loose the css overwrite capability offered by the Content Server.
Webreports tend to require large numbers of themselves. This requires a very clean process documentation for the group of webreports.
Webreports take some time to start. On performance points, Subwebreports are evil. On the other hand, Subwebreports are required for a lot of things.
Doing things via AJAX means, you enter the wunderful world of async processing. Actually, you have no control on when the async webreport is finished

Here is a short receipe howto use webreports as widget surrogates:

Add a webreport html widget to your perspective. This one will held your base webreport.
This base webreport contains all menu structures and also all js needed.

Define your webreports for the different “pages” controlled by your menu. Each webreport is a stand alone webreport.
Call these via js from your menu structure. Use AJAX calls.
Insert the output from this webreports in a html structure (like a div).
Add somewhere a home button to switch back to your first page.

Some more tips:
Consider using stored searches in your “page” webreports. These are quite fast, depending on your search infrastructure. You dont have to use multible webreports to support this, you can switch the sourceID on the AJAX call to the webreport.
Consider to use the REST tags of a webreport.

Posted on

Adding a Bootstrap Menu in a smartUI Webreport or HTML widget

Inside the webreport html widget there used to be the opportunity to use plain html for menu or other purposes. Since 16.2.4 there is a new widget in town, a plain html widget without the need of an webreport license.

In both cases, you have to think of the new namespace (“binf”) on using bootstrap.

Take a bootstrap menu for example.

This is an example of a plain bootstrap menu

The plain bootstrap code wont work, because OpenText added the prefix “binf” to introduce a special namespace.

Change the plain code by adding these “binf” prefixes:

<nav class="binf-navbar binf-navbar-default" role="navigation">
 <div class="binf-navbar-header">
 <a class="binf-navbar-brand" href="#" >Committee Menu</a>
</div>
<div>
 <ul class="binf-nav binf-navbar-nav">
 <li><a href="#" ;alert(s);">Committee News</a></li>
 <li><a href="#">Member List</a></li>
 <li class="binf-dropdown">
 <a href="#" class="binf-dropdown-toggle" data-binf-toggle="dropdown">
 Documents
 <b class="binf-caret"></b>
 </a>
 <ul class="binf-dropdown-menu">
 <li href="#">List Documents</li>
 <li href="#">Notify users</li>
 </ul>
 </li>
 </ul>
</div>
</nav>

Please do not forget to change the “data-toggle” also to “data-binf-toggle”.

Posted on

Using handlebars to setup a select box in CSUI

Look at the standard problem:

Your handlebars template contains a Selectbox to display a the status of a task:

<select name="status" id="Status" class="binf-selectpicker" data-style="binf-btn-warning">

<select name="status" id="Status" class="binf-selectpicker" data-style="binf-btn-warning">

{{#select status}}

<option value="0" selected="">Pending</option> 

<option value="1">In Process</option> <option value="2">Issue</option>

<option value="3">On Hold</option> 

<option value="-1">Completed</option> 

<option value="-2">Cancelled </option>

{{/select}} 

</select>

And the values you receive from the REST Calls are between -2 and 3.

How can you transfer this in a “selected” clause in the html select box?

 

Easy.

Ass a select helper in your main marionette view:

 Handlebars.registerHelper('select', 
function (selected, options) { 
Handlebars.registerHelper('select', function (selected, options) 
{ return options.fn(this).replace( new RegExp(' value=\"' + selected + '\"'),
 '$& selected="selected"'); });

This handlebars helper named “select” will examine the coding tagged betweern a {{select}} and a {{/select}} in your handlebars template and insert at the option clause which is selected a ‘selected=”” ‘ clause. Then the Selectbox is ready to use.

 

Simply add a

status: this.model.get('status'),

to be returned in your template helper and the

{{#select status}}

...

{{/select}}

 

will trigger your select box helper to check for the v ariable status and to add a selected at the proper place.

Thats the magic behind the handlebars select helpers.

Posted on

Technical Training “How to program a Widget in the new Content Server GUI” with the CSUI SDK

Hi folks

Beeing Content Server Trainer, I was asked to provide a training “How to program a Widget for the new Content Server GUI” to several customers. This is about the content of such a training and the reason why such a training is technically really advanced.

CSUI SDK introduces a shift in paradigma, the server is no longer providing the GUI, all is done by a Javascript Application at the client side.

Basic Training (newest version 1.005 from Feb/2018)

The basic training is very compact and lasts 5 days.

First, lets take a look on the components:

As a prerequisite, a firm knowledge of CSIDE, How to build a module, the Node Structure and whats to do with Content server Nodes is necessary.

At the end of the training, you’ll have a working knowledge of:

  1. Content Server Perspectives. What are they and how you can use them to provide a user specific interface.
  2. Content Server REST. This is the only possibility for the client to communicate with the server, so its mandantory to know the REST interface from the application point of vue. And, as REST can be very slow due to unneccesary data, its also mandantory to know, how to add REST services to the Content Server to get the data you want in the fastest way.
  3. Javascript. There are Javascript Patterns, which are used heavily in the SDK. If “Javascript Object Inheritance”, “Currying/Schoenfinkelizing”, “Decorators” etc are weird words for you, this chapter is the right chapter for you.
  4. Next is the infrastructural world of the sdk.

    CSUI Components
    The CSUI Components

    There are several components, which must be understood prior to build a Widget.

    1. node.js is the base Javascript system for our development
    2. grunt.js is a Javascript task runner, which we use to build, test and debug our widget
    3. yeoman is a scaffolding system, which will be used by a Opentext extension to initialize the development folder. It also creates the skeleton of a Content Server module, which is used as a “Carrier” for our Widget(s)
    4. backbone.js is the base framework to be used
    5. marionette.js is an extension to backbone.js, making Views easier.
    6. handlebars.js is the html templating framework used in the sdk
    7. require.js is the javascript module loader to be used
    8. bootstrap.js/binf.js is originally the public domain CSS/JS framework from Twitter for the appearance of the Widget. Binf is the Opentext variant, allowing to override CSS without negative effects
  5. Next is the SDK itself. Due to time restrictions, in the base training are only the base functions, the advanced training covers the other aspects. It contains
    1. Installing the SDK
    2. Building the Demo Widget
    3. CSS Style Overrides binf
    4. General Overview of the SDK
    5. Content of the SDK
    6. Routing (Preview of the Advanced Training)
    7. New Commands
    8. Custom Columns
    9. Metadata
    10. Define a new NodeType
    11. Create a Widget
    12. Base Widgets
    13. Controls
    14. Models
  6. Mockup and Test Data. How to setup mockup REST data. How to build test facilities in the SDK
  7. Anatomy of the Hello Widget. A walktrough through this widget
  8. Anatomy of the MyAssignment Widget
  9. Add another Widget to the Content Server. Change the Hello Widget and add additional fields
  10. Build a Custom Widget to be used as Client with a custom REST service. Here, a custom widget is build, which uses an extended version of the custom REST service from Part 2.
  11. If time allows: Some Tips and Tricks from a “Work-in-Progress” Widget

 

Advanced Training (Version 1.005 Feb/2018)

OK, thats the basic training. There are a lot of additional things inside the SDK, but to understand these, there must be a couple of weeks with practical experience in between. The advanced part has beed remodelled to include a couple of interesting things.  The advanced part contains:

  1. Chapter 1 Extended SDK Parts
    1. Additional Widgets
      1. NodesListReportView
      2. TilereportView
      3. FilteredCountChartView
      4. Carousel Widget View
      5. Userwidget eSocial
      6. ActivityFeedWidgetView
      7. ActivityFeedContent
      8. ChatWidget
    2. Datepicker
    3. switch
    4. Workflow (new in Content Server 16.2)
      1. Workflow Components
      2. Workflow in smartUI
      3. Starting Workflows
      4. URL Routes
      5. Workitem Actions
      6. Workitem Extension
      7. Writing Workflow Extensions
    5. New REST API Support (16.2) for Workflows
    6. Widgets not part of the SDK
      1. Mobile Scanning
      2. xECM: Header Widget with Business Object Infos
      3. xECM: Snapshot of current document Attachments
      4. xECM: Dossier View Widget
      5. Engineering Doc Management: Search
      6. xECM: Office365 Groups
  2. Chapter 2 Extended SDK Features
    1. Build Language Packs for Internationalization
    2. Commands
      1. Implementation and Inheritance from “CommandModel”
      2. Best Practices
      3. Using Commands
    3. Custom URL Router. Routing, adding custom Routers. Using Routers as Navigation.
    4. Behaviours. What are Behaviours?
      1. DefaultActionBehaviour
      2. BlockingBehaviour
      3. ExpandingBehaviour
      4. InfiniteScrollingBehaviour
      5. PerfectScrollingBehaviour
      6. PageLeavingBehaviour
    5. Mixins. What are Mixins? All available Mixins.
    6. Browsable Support for Collections. Using the “Browsable” support for Model-Collections.
  3. Chapter 3 Additional Things to consider
    1. Tips and Tricks (Work in Progress- List can change)
      1. Add a OTDS Ticket already in the browser to the connection object
      2. Re-using a OTDS Ticket as LLCookie
      3. Checking the paths in the test/index.html
      4. Using Helpers for supporting a select box with Handlebars
      5. Adding non CSUI supported JQuery functions in a view
    2. Handlebars advanced. A deeper look into Handlebars
    3. LESS advanced. A deepter look into LESS, the CSS language used in Bootstrap
    4. Accessibility in Bootstrap. What can be done to add support for screenreades etc to Bootstrap/Binf? Whats to avoid? Which tools are available
    5. Best Practices in Development

 

As you can see, there is a lot of stuff. The basic training last 5 days, the advanced training 2. But on the other side, you’ll get happy users with your new Widgets.

And that’s all what counts.

References

Javascript
  • “JavaScript Application Design “as a general introduction (covering Grunt) https://www.manning.com/books/javascript-application-design
  • Stoyanow’s JavaScript patterns http://shop.oreilly.com/product/9780596806767.do
  • Flanagan’s “JavaScript: The Definitive Guide” http://shop.oreilly.com/product/9780596805531.do
  • Crockfords “Javascript The good Parts” http://shop.oreilly.com/product/9780596517748.do
  • Flanagans “JavaScript Pocket Reference” http://shop.oreilly.com/product/0636920011460.do
Bootstrap
  • Spurlock: Bootstrap Responsive Web Development http://shop.oreilly.com/product/0636920027867.do
  • Syed Fazle Rahman: Jump Start Bootstrap: Get Up to Speed With Bootstrap in a Weekend https://www.amazon.com/gp/product/0992279437
  • Alan Forbes: The Joy of Bootstrap: A smarter way to learn the world’s most popular web framework https://www.amazon.com/gp/product/1522792813/
Require.JS
  • Greg Franko: Instant Dependency Management with RequireJS How-to https://www.amazon.com/Instant-Dependency-Management-RequireJS-How/dp/1782169067
  • David Sulc: Structuring Backbone Code with RequireJS and Marionette Modules
    https://leanpub.com/structuring-backbone-with-requirejs-and-marionette
Backbone
  • Developing Backbone.js Applications Adnan Osmani http://shop.oreilly.com/product/0636920025344.do
  • js Patterns and Best Practices Swarnendu De https://www.amazon.com/Backbone-js-Patterns-Best-Practices-Swarnendu/dp/1783283572
  • js Cookbook Vadim Mirgorod http://shop.oreilly.com/product/9781782162728.do
  • js Blueprints Andrew Burgess http://shop.oreilly.com/product/9781783286997.do

 

Backbone-Marionette
  • Getting Started with Backbone Marionette Raymundo Armendariz, Arturo Soto
    https://www.packtpub.com/web-development/getting-started-backbone-marionette
  • Marionette.js: A Gentle Introduction David Sulc https://leanpub.com/marionette-gentle-introduction
  • Marionette.js: A Serious Progression David Sulc https://leanpub.com/marionette-serious-progression
Mockjax and Jasmine
  • js Cookbook Vadim Mirgorod https://www.packtpub.com/mapt/book/web_development/9781782162728 Chapter 8
  • KnockoutJS Essentials Jorge Ferrando
    https://www.packtpub.com/application-development/knockoutjs-essentials
  • JavaScript Testing with Jasmine Eva Hahn https://www.safaribooksonline.com/library/view/javascript-testing-with/9781449356729/

 

Content Server Trainings
  • 4-0140 Content Server IDE (CSIDE) Fundamentals
  • 971-301 Livelink ECM Enterprise Server Workflow Customization Fundamentals
  • 03-0117/8 Webreports Design

 

 

Data Protection Declaration Proudly powered by WordPress