Blog | The Joy of Content Server

February 28, 2020February 28, 2020

Conditional Configuration with require.js in OpenText smartUI

When you write a widget or something else in smartUI, you encounter (from time to time) the problem to provide your widget with different configurations.

Like one widget provided as DashBoard for Music Events and lateron provide the same Widget as Dashboard for Race Events with different Logos Graphics etc. Require.js conditional loading of a module will help.

The idea is, if a conditional configuration module exists, it will be loaded and override the standard configuration. If its not present at the defined place, it wont load this and use the existing configuration.

Lets see an example:

in a view, we define a config.js containing all configuration stuff of this module

The main View with the config.js declaration

This will load configration values like

Mid of the configuration Module with the value "backgroundcolor" which we want to override — We want to override the value “backgroundcolor”

So far so good. When we want to override for example the value “backgroundcolor”, we can do that by editing the file, but we would have to redo that for all diffenent configurations. Its much smarter to define an optional require.js module, that will be loaded if present.

Our alternative config.file is called targetconfig.js.

Here are the values to replace the original ones.

For simplicity it contains only the value “backgroundcolor”.

The logic is:

If targetconfig.js exists, it will be loaded with require.js and replace the specific contents of the original config.js file with the contents in targetconfig. If its not existing, its simply doing nothing and the original config will be used.

How is this done?

First, we have to declare the additional targetconfig.js in the define area as optional.

Second, we must add a require.js module called optional doing the job

Now, we can use this in our wonderful widget providing as much configuratíons as we want – based on the existence of this config files.

Welcome to the Wonderful world of OpenText smartUI!!!

New: We are offering custom widget development. Interested? Send an e-mail at merz at ebit-company.de stating the purpose of the widget and requesting a qoute

February 13, 2020February 13, 2020

Routers in OpenText SmartUI

Inside a Single Page Application, a router will take care of that what a URI used to do for you in a classic Client/Server application, it will intercept the URIs from beeing send to server and decide based on the URI whats to do with it. All within Javascript (we are not talking about html5 push state, thats another story)

Normally, the router will change the perspective (the display page) depending on the URI. For example, if an URI is http://<yourserver>/app/greetings, the Router will change the perspective to some new widgets and display the contents.

There are 4 routers build in the sdk (all in csui\pages\start\impl)

node.perspective router
switches to a different node
landing.perspective.router
used to address landing pages of the users
search.perspective.router
switches to the search perspective requested
Perspective.router is the parent object of all routers in the sdk

A router changes the perspective, for example a node perspective

var nextNode = context.getModel(NextNodeModelFactory);
nextNode.set(‘id’, 2000);

Normaly these routers shoudl be enough for standard usages, but if you need your own router, the next example can bring some light into a routers anatomy.

Scenario:
there are two routes in an URI, “greetings” and “greetings/:id”.

“greetings” clears a greeting subject, which was initialized from the model factories) and sets the id and “greetings” in the application scope

“greetings/:id sets the id in the greetings subject

_updateURL constructs the URL and moves to this URL.

Next, we neet plugin with two tasks:

–Get/create the model and switch perspective depending on the subject
- In _fetchHelloPerspective
–Set the greetingSubject in the constructor

Thed greetings router plugin — Process local perspectives with a plugin

We defined two routes, so we must provide two perspectives. We want to load them not from the server, so we need to define them locally als json arrays.

the greetings/:id perspective — The perspective for the greeting/:id simply displays the greeting widget

the greetings perspective — The perspective for the greeting displays the hello widget

the extension points — The extension points for the router

And this thing works (see these screenshots)

example of a greetings/reiner route — URL localhost/cs162/cs.exe/app/reiner called

Imagine the possibilities. You can add a bunch of functionalities to the client all with an URI, which can be behind a link or a button.

Quite powerful, the smartUI sdk! You will love your routers.

January 13, 2020January 13, 2020

The Connection Object in smartUI

smartUI does have a couple of interesting objects, but the actual documentation about them is not very clear. So lets take a look on the objects.

First, we’ll examine the connection object a little bit more in detail. The page context will follow in another post.

The connection object provides information about the content server to connect with. Normally, this object comes from the content server but has to be constructed manually when you use the index.html testing facility.

Lets take a look at a typical index.html with the connection object setup

Remember, the widget will get everything beeing perfectly setup from the content server, but using the test faciliy, you have to mock up this.

Parameters:

url – the url which is the content server url in your mockup data
supportPath – where is your content server support directory
credentials – in case you want to log in, use this clause
session- when you want to ignore the ticketing etc, use ticket:”dummy”

Lets see what this object is doing:

(here the page is running and this is a screenshot from the debugger)

A debugging session with the connection object

We see, there is a connector object beeing the parent for the connection object. The connection object contains all parameter setups from the index.html, mainly the url and the session infos.

There is also an Authenticator in this connector object, which contains another copy of this connection object but also with the information, how the automatic re-login for a valid session ticked should be done. And of course, the type of Authenticator (here InteractiveCredentialsAuthenticator)

(Remember: The security token timeout will cancel your session (within typically 300 sec) if you do not a relogin).

This is the mechanism to avoid permanent logins. Take a look at the available authenticators to see the possibilities.

You can always refer the Connection Object to get the url of the server. This url os merged with the parameters in the Model URL function to build the final REST call.

A useful object. Normally we get it automatically from the server, only while testing with Mock-Up Data we need to setup this object manually.

January 3, 2020January 3, 2020

Config Settings send to a smartUI Module

There are several possibilities to set the configs from the base OScript Module. The most interesting is the method of setting the configs via Oscript. The complete list of the possibilities is_

When you visit a mode or get a children
- Implement “fields” and/or “expand” in the appropriate CSNode.
- Use the date from data.(fields.name)
When the Widget is created
- Implement an REST service which will give you the data
- Load the data on the first widget creation and cache it with a permanent model factory in the context
When the page is loaded
- The CSUI::Extension::GetDynamicConfiguration method in OScript has normally this entry

function Assoc GetDynamicConfiguration( Object prgCtx, Record request )      
return Undefined
  end

Overwrite it with your desired configuration (here only the enableAppleSupport is displayed for clarity):

 function Assoc GetDynamicConfiguration(

        Object      prgCtx,

        Record      request )      
Assoc       basicAppData
Assoc       config 
(snip)

        Boolean     enableAppleSupport

    (snip)

        // changes in admin page should be reflected immediately by every thread

        settings = $WebAdmin.AdminUtils.GetSmartUISettings( prgCtx )
     (snip)
    if ( IsFeature( settings, "enableAppleSupport" ) && IsDefined( settings.enableAppleSupport ) )

        enableAppleSupport = settings.enableAppleSupport

    end

    

    config = Assoc{ 
    (snip)
     "csui/utils/commands/email.link": Assoc{ "enableAppleSupport": enableAppleSupport },
                  

    return config

end

The returned assoc consists of a requirejs module name containing an assoc with the config values.

In your js module (here csui/utils/commands/email.link) add this line

var config = _.extend({

    rewriteApplicationURL: false,

    enableAppleSupport: false,

    appleNodeLinkBase: 'x-otm-as-cs16://?launchUrl=nodes/'

  }, module.config());

Then the config is avaliable in your js module and can be used like

var iOSEnabled = config.enableAppleSupport

Nice, isn’t it?

December 20, 2019December 20, 2019

Dealing with Distributed Agents

From time to time you’ll have to deal with distributed agents inside content server. This can be a little confusing, so maybe this post is helpful there

In the Admin Pages, you’ll find a dashboard to control the default setup. Either add a func=distributedAgent.AgentStatus to your servers URL or search inside the admin pages for distributed Agent things like this

Click on Distributed Agent Dashboard.

Then you’ll see the distributed Agent dasshboard

Here you’ll find all information about the current state of the system and the configuration of the distributed agent system

Per default a content server has one distributed agent with three workers. You can change the number of workers used by the agent by changing the number of workers in the opentext.ini file in the [distributedagent] section.

You can configure the whole distributed Agent system by clicking on the link indicated with the red arrow above. Then the configuration page opens:

Here you can set up values for the the treatment of low priority tasks (Enable Fairness). The agent can spent between 5% to 50% on low priority tasks, which will be processed aftera minimal age set by “Task Age”.

When you have more than 1 agent in the system, you can switch the priority Agent here also. OpenText recommends that you select the Distributed Agent with the greatest capacity to be your Primary Distributed Agent. Typically, the Distributed Agent with the greatest capacity resides on your most powerful or your least busy computer.

If you want a defined outage to be set, you can do this for the Agent by clicking on “Add new Outage” at the upper right. You can do the same for specific workers, we’ll discuss this later.

Back on the DashBoard, you cal also modify single workers. SImply click on the name of a worker, then the “Configure Worker” page opens

If you want to set a more specific name as that automatically generated, fill the Description field.

Much more important are the three columns “Never Run”, “Run” and “Run First”. The Run column contains all tasks this worker is supposed to do.

You can exclude tasks from this worker, then this worker will never execute this task. You can also prioritize a task, which means this worker will do this task at first.

To configure this, select either all of the tasklist under “Run” or one or more tasks from the tasklist and move the entries either to “Never Run” on the left (worker will never execute the tasks) or to “Run First” on the right (worker will execute this tasks at first).

This allows you an effective task prioritizing for a single worker.

You can also define an outage for this worker by clicking on the Button “Add new Outage” on the lower right.

Easy, isn’t it?

November 4, 2019November 4, 2019

Find require.js module dependencies in smartUI

Have you ever noticed that the number of modules in a require Javascript enwironment can be huge? Difficult for an overview?

In this case, a graphical overview of modules and their dependencies can save you.

There are two solutions.

Non-Webstorm Solution

If you are using any text editor as a main Javascript Programming Tool, the npm dependo is a nice tool. Used against the MyAssignments Widget, it produces his output (click on the image to see a larger version)

Installation:

$ npm install dependo

Usage:

$ dependo -f amd /path/src > example/report.html

will produce the graph in the file report.html

There is also a grunt task for dependo here

https://github.com/auchenberg/grunt-dependo

Webstorm Solution

If you are using the Webstorm IDE for your projects, there is a build in solution.

It produces against the MyAssignments Widget this chart (click on the image so see a high resolution version):

To get this diagram, click on the root of a widget and select

“Show Diagram Popup” shows the Drawing as a popup window, while “Show Diagram” shows the drawing in a new tab.

In Detail Mode you’ll see a lot more details, here are the external modules required by the main js module.

This gives you a lot of information and this can be also used to provide a technical system documentation.

Happy documenting.

October 29, 2019October 29, 2019

Switch the smartUI SDK to Javascript ES6

When you start GRUNT, you will get errors on ES6 keywords, each LET will be flagged as error,

Have you ever wondered, why the SDK is not accepting JavaScript ES6? The wonderful new level of Javascript avoids for example the Variables Hoisting Effect by using LET instead of VAR. (Reduces the scope of the variables)

On the other hand, not all Browsers support ES6. So be aware that you may have to switch it back, if your browsers provide no support for ES6.

To change it:

open the node-modules folder in your project dir
scoll down until you find the module eslint-config-default . Edit the file .eslintrc in a tect editor (screenshots are from WebStorm IDE)

in this file, you’ll see that the file off.js is used for configuration. Open this file in a text editor.

Here you see, that es6 is set to false (Yellow Arrow). Change this to true and save the file (maybe under another name. In this case, correct the require command to reflect the new name).

So now the GRUNT-file is producing no problems when it encouters a LET.

But be aware: If your bropwsers lack some support for es6, you must switch back to ES5.

October 18, 2019October 18, 2019

Practical smartUI: Reading complex categories on the Content Server Side

Normally, when building REST Services for smartUI, you’ll have to read complex attributes from categories to send them for display to a widget.

Lets use this example

A complex Category with 4 Sets and Table Key Lookups — A complex category with multible sets and table lookups (click to enlarge)

In your REST handler, you r task would be to get the values of the category attached to a node, read them and send them to the client using REST.

In this writing, we’ll focus on the “Read them” part. Our trick is

object  LLNODE = $LLIAPI.LLNodeSubsystem.GetItem(node.pSubtype)
result = LLNODE.NodeCategoriesGet(node)

Thos gives us all Categories connected to a node.

When we receive the REST call in ther server handler, we should do

find the node id of the the object to examine.
find the categories attached to this node (Red Arrow in the Screenshot)
iterate over all categories and get the attributes we want. This is based on
1. the attribute definitions (Green Arrow on the Screenshot)
2. the attribute values (Yellow Arrow on the Screenshot)
if you encounter a set (-18 as attribute type), you also will have to iterate over the set (Red Rectangle)

Get the Values of a complex category — The REST Handler to get the Values of a complex category

Lets take a look on the Values of a single Category. They are inside an assoc with one entry per attribute id.

The Value list in CSIDE — The value list in CSIDE

Now you are almost done. Put a switch construct to get all values of the attributes on which you are intersted and get them out of the fdata assoc. The Value is found in the fdata assoc of the n-th Category unter the content of the first Value entry. Then we have to pick the attribute id where we find the content of the attribute in the first Value entry.

The Str,ValueTostring typecasts the output to be a string. So when we finished the job, we’ll see in the entry event.eventcycle the value of the attribute with the name “EventCycle”.

Get the attributes of interest — The switch construct to get the attributes of interest

The only thing to do is put the values in assocs and send them to the smartUI widget under the main clause “events” in the JSON array

Sent the values back — Send the values back. Support 200 (ok) and 500 (error) as status code.

So you see, Categories are no Monsters. They are quite user friendly. Using the same mechanism, you can even update complex Categories with one REST call.

Happy smartUI programming.

New: We are offering custom widget development. Interested? Send an e-mail at merz at ebit-company.de stating the purpose of the widget and requesting a qoute

October 17, 2019October 17, 2019

Practical Series II: Building an EVENT Management System in the Content Server using a graphical smartUI Dashboard and Connected Workspaces.

3-5 days, depending on the skills of the attendees.

Here, an EVENT Management system in the Content Server is built from the scratch. Events can be anything, from a Music Concert to Keysessions or anything else. To manage Events, all necessary Notes, Documents, Feedbacks can be stored in the Content Server.

Each event is mapped to a Business Workspace and has several folders to hold all documentation and feedback. Events can be related to other events. Each Event is containing Documents according to the template and has a Team of Coworkers. We also implement a Dashboard to see all Events in smartUI. If an Event is clicked in the Dashboard then the corresponding Connected WorkSpace Business Object is opened. Both parts, the Dashboard and the Business Workspace correspond via REST Service, which is also to be implemented during this workshop.

Uses the Content Server 16.2.10, the smartUI SDK and the D3 library, which is part of the smartUi SDK.

New: We are offering custom widget development. Interested? Send an e-mail at merz at ebit-company.de stating the purpose of the widget and requesting a qoute

October 17, 2019October 17, 2019

Practical Series I: Strategies to “widgedize” an existing Content Server module and to add functionality in an existing widget.

1 day. Here, some practical parts of the SDK usage are discussed. First, we discuss, what’s to do, if somebody wants to use the Barcode Command (Enterprise Scan) as a widget in smartUI. We discuss what’s to investigate using CSIDE and implement the widget. Then the appropriate REST Services are implemented on the Content Server side. Then we add an email functionality to the TEAM widget by implementing this as a view and interconnecting this with the original widget using a command.

Practical Experience in the SDK or the Base Workshop is required.

New: We are offering custom widget development. Interested? Send an e-mail at merz at ebit-company.de stating the purpose of the widget and requesting a qoute