The wonderful World of Opentext Content Server
Have you seen the new permissions explorer in smartUI? Open up the permissions on an object and you’ll see the new selection.
The permissions explorer is opened with a click on the “Permissions Explorer” Button on the upper right.
This will give you the option to edit all permissions of the objects in this folder at once.
Have you seen the new smartUI thumbnail mode? You can switch the normal nodelist to the thumbnail mode quite easy by clicking on the list/images icon in the upper right. Another click switches the display back to the list mode.
And, thumbnail mode does have also commands available
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.
The Chapter 6 (SDK Intro) (5 days training Basic)
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:
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
The chapter 3 has also been amended
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.
Then a Parameter Window opens. The Webreport can be startet by pressing the button “Run Webreport”
A feedback can be given from the Webreport like this
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!
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
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);
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.
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”.
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.
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.
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:
There are several components, which must be understood prior to build a Widget.
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:
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.
Did you ever wonder, how to create new widgets or forms for the new SmartUI of the content server? The new SmartUI is responsive and can be used on mobile devices.
If you want to add new widgets or modify things, there is a new SDK on the knowledge center, which can be found here:
This are the components:
The basic requirement is the installation of node.js at your CSIDE machine. You should be familiar with the REST API and Grunt to use the SDK.
The workflow is
Then you should see the example widget under the name of your module in the perspective manager.
Watch for upcoming posts on this exciting new Content Server technology.