Posted on

Rethinking smartUI

Rethinking smartUI

Yesterday I published a new video on Rethinking smartUI on Youtube. If you havnt seen yet, here is the short video. In this posts, we’ll go though the technical aspects of this new kind of approach to smartUI. This demo is a Document Pad (or short DocPad), displaying all document properties in a SCIFI GUI arrangement.

This is Part 1 of a multipart post covering all aspects of this Docpad.

Part 1: Overview

This demo is supposed to do this:

  • Demonstrate the usage of html5, javascript 6 and css3. Especially how to use this modern components inside the smartUI framework. For example, the famous parse function in the standard demo widget will change this way:

js5
parse: function (response) {
// All attributes are placed below the data key
return response.data;
}

js6
parse: (response) => response.data

  • Compare the methods of getting data via REST using the methods
    • Model (as usual in Backbone)
    • XMLHttpRequest (the good old XMLHttpRequest as used since long)
    • Fetch (the modern javascript 6 method to get REST data)
    • Not used: async/await. Despite the fact that async/await is very handy, this appeared in javascript 8 and is beyond the scope of the demo.
  • Exploit the power of css by using
    • different display methods as Grid and Table
    • use panels in a cube. Origionally this was planned as moveable 3D cube. In this case, all metadata were written on the sides of the cube. Here is a very good technical description how to do it. Unfortunately the cube idea seems to be very impractical for the demo and was dropped
    • “burning borders”, fog and animations as element of the UI
    • provide an additional print style sheet to make this screen infos printeable in a normal way
  • Except some Icons of Bootstrap, nothing is to be used from Bootstrap. These Icons can be replaced by those in the fontawesome font
  • JQuery is not used
  • These Content Server REST commands are used
    • The log in is done in the index.html page, but when used as a dashboard widget the user is already logged in. If a separate login panel is required (p.ex. for a stand aloane dashboard on a tablet) then its necessary to provide a login via post […]/v1/auth
    • then the user info is retrieved via get […]/v1/auth
    • if the user has stored a photo in his profile, then the photo is retrieved by get […][photo-url] and then inserted in the DOM.
    • Then the standard Node-Picker Control is called. All Node-Picker interactions with the server are managed by this control. As a result, the nodeid of the selected Document is returned.
    • Next, the DAPINode infos of the selected node are retrieved by get […]/v1/nodes/{id}
    • for the “created_by” and “modified_by” there is only a nujmber returned, the userid. For this two cases, the username is retrieved from the server by get […]/v1/members
    • Its always nice to exploit the thumbnail of the document to the user. This is done by get […]/nodes/{id}/thumbnails/medium/content
    • To get all other data , a special trick is used. The command get […]/v1/forms/nodes/update returns all categories and the othere nodeinfos using one REST call. This commmand takes a while to execute, so the user is entertained using some css animations.

In the next week, we explore the infrastructure of this Docpad demo.

Posted on

smartUI Goodies for Webreport Fans

One of the smartUI goodies for webreports

In the rich universe of Opentexts smartUI there are even some goodies for the webreport addicts. Besides the standard webreport widgets there are two controls witch are used happily and heavily by webreports designers, named Parameter.Prompt and Status.Screen. These are the true smartUI Goodies for Webreport fans.

smartUI support
Need smartUI support?

Especially two controls are of interest for the seasoned webreport developer.

For tests, I’ve used a senseless webreport

A senseless webreport just for demonstration

This is a dummy webreport with several parameters. At the top right corner you see the execution result. Just for demonstration purposes, this has been kept simple and stupid.

But what if…….. the webreport is supposed to be run under the new and amazing smartUI? In this case we have two controls to help.

Parameter.Prompt

This control senses, if the webreport does have one or several parameters and allows to alter the parameters before the webreport is started.

PArameter.Prompt, a special service for all the webreport addicts

Here, all parameters can be changed. A click on “Run WebReport” will start the webreport if activated.

The js code is easy

JS code for the parameter prompt control

Status.Screen

can be used to start the webreport and to display some End-Messages. A standard situation is displayed here

A webreport has finished and the End-Messages are displayed

For example, if a html file is defined as output under the folder “webreports”, then this infos can be displayed at the status screen.

The js code is easy

A smartUI goodie for webreport fans in JS: status.screen

Both controls can be combined to a widget to start and execute webreports.

If you need some more sophisticated, its easy to override those controls with custom controls.

That were the smartUI Goodies for Webreport Fans.

Happy playing with webreports, but dont forget: Webreports will make a machine not faster!

Posted on

Asking your browser for help in smartUI developments

Browser Memory

When you think of smartgUI, you may always think of a lot of small js/css text files and a couple of resources to be loaded. All together act as smartUI Page like this:

A typical standard landing page

This is a typical landing page. With such a page you can control, how your perspective is working and also if certain commands, controls and widgets are correct. For example, the widget ot the top left is a modified Welcome Widget showing System Messages and other news channels.

What else can a browser do for you in your continuing quest to produce an awesome user experience for an enduser?

A lot! First, open the development tools in the browser. Here we are using Chrome, but this tools are available on all browsers.

Developer tools – a closer look

Developer Tools

Press Ctrl+Shift+I or the Develeloper tools entry in the menu.

The tabs in the developer tools

This will open up the develeloper tools. The functionality is subdivided in several tabs. The most important (from left to right) are

  • Elements. Gives you the possibility to see the actual DOM loaded, Here you can change css and other elements and you’ll see immediately the effect. The rightmost icon lets you identify any element on the screen (and display it in the DOM). Thaty a handy way to identify elements on the screen and to which js file they belong (Similar way as we had in legacy gui with oscript in these ancient times)
Identify Icon
  • Console. Gives you all messages from the browser. You can see all module messages, also missing modules are displayed in red. There are several levels of messages, which can be filtered. Here, since this is a develeopent VM, all levels are activated.
  • Sources. The main tab to work with.
The sources window

The complete smartUI is loaded in the browsers memory (except those data parts, which will be changed via REST/Ajax later on). So we can examine directly, whats happening in the browser.

Interesting is the treeview at left:

Loaded js parts

We see blue and orange folders, which can be opened. Lets open a blue folder, for example the “New Generation Desktop” ngd and the resubmission

Bundles and Sources

First, we see, the ngd has the name ngd/bundles. It contains the js and css bundles of ngd. Lets open another folder, the resubmission folder. Here you see a blue app/bundles folder and an orange folder named src. Here you have the standard SDK tree. If there sre orange folders, then you can browse into the source code, like this:

Load a souce file which is not in the SDK

Here we checked the AddReminder.js from the reminder package, which is one of these modules not part of the smartUI SDK.

Whats to do with that file(s)? Select the file (with js extension) in the tree and right klick. Here you can edit the file or save the file to your filesystem.

Save a loaded js file

Search a needle in a haystack

We have a lot of js files in the browser memory. How to search for a specific file?

First, display the search window by clicking on the to right 3 point menu. Goto More Tools and click on Search. Then a search bar opens at the lower left. Enter your search name (mostly part of the requirejs path) and you’ll see the results. Select the .js file (bundles are not very useful to read). The file is displayed in the source window.

Our requirejs paths in the browser

Sometimes its quite nice to inspect the loaded requirejs modules in the browsers memory.

At first, we have to switch to the debugger mode. So open the console tab and type “debugger” in the last line to put the browser in Debug mode.

Then our interestring things appear at the right of the developers tools.

We see, the scope is filled with the loaded objects. Go to the global scope. Scroll down, until you’ll find ther csui entry. Please note, this may change to nuc from 21.2!

There are several entries under csui. Open the first “require” entry (or “requirejs”). Then open s. Expand contexts. Open _ (underscore). Expand registry.

Then all loaded csui and extension parts are listed in the registry. Lets examine one entry (countryselector.view).

Under depmaps, we see the dependencies.

Under map we see all map related things, this is the place to override an original module with a custom one.

And we have access to the source code (if we click on the link at countryselector.view:13.)

Now you have the base for your own experiments. There are a lot of additional features in the developers tools, which could not be covered here. So: Happy experimenting.

Posted on

The new smartUI Nuc. A closer look.

The new NUC package in smartUI

Disclaimer: The discussed topic is on Content Server 21.2 smartUI SDK and may change anytime without notice after today (I dont hope so, but….)

The new package nuc in the smartUI SDK is the

(quote) nucleus of the nucleus (endquote)

and something like “the Best of the best, Sir” (Men in Black I)

What is nuc?

Lets take a look at the lib/src folder in an initialized 21.2 project. To see the images larger, right click and open the image in a new tab.

Nuc, The Nucleus of the Nucleus

The nuc consists of these folders:

utils

This folder was located in the csui package in ancient time. Nowadays it has moved to nuc.

If you compare that to the csui/utils(21.1), you’ll discover a few differences

And also csui/utils(21.2)

If you use requirejs paths to elements, which are not in csui/utils(21.2), you should check these references and edit them to point to the proper element if needed.

models

This folder was located in the csui package in ancient time. Nowadays it has moved to nuc.

If you compare this with the csui/models(21.1), you’ll notice a few differences.

And also compared to the csui/models(21.2) there are differences:

A closer look reveals, that the csui/models(21.2) is not identical to csui/models(21.1) and therefore you are supposed to correct manually any requirejs paths in your js code, if you have to require those models moved from csui/models to nuc/models.

lib

This folder was located in the csui package in ancient time. Nowadays it has moved to nuc. The folder contains

If you compare that with lib at csui (21.1) and also with that lib folder existing in the csui (21.2), you’ll discover, that csui/lib(21.1) is the same as csui/lib(21.2), whereas nuc contains a subset of the entries of 21.1. At least on 21.2 the csui/lib references seem to work perfect, so that those in nuc/lib could be ignored.

grunt-tasks

This folder was located in the csui package in ancient time. Nowadays it has moved to nuc. It contains that:

If you compare that with the grunt-tasks at 21.1, you’ll discover a surprisingly large amount of additional documentation files. The old 21.1 csui/grunt-tasks had only the README.md, whereas there are a lot of additional md’s on 21.2 nuc/grunt-tasks available.

bundles

this is a new folder consisting of a couple of pre-defined bundles. These Defines([]) are quite handy to use. Nothing special here.

Posted on

How to check if the smartUI SDK is working

Test the sdk

If you get new Content Server Versions, you also have to upgrade your existing smartUI projects to the new version.

In this post, I’ll give a short receipe how to check the functionality of the sdk.

The primary component of the sdk is the generator. It contains the compete sdk and all infrastructural things (grundfiles etc) to build a project folder. All other zip files (except the style override kit for webdesigners) are secondary.

The following receipe builds on a running SDK of any older version.

The Check

So to check, if a new generator is working, do this: (can be done in parallel to existing versions).

  • Unzip the new generator to a folder.
  • if you do have older generator installed and you want to keep it:
    • change the name of the new generator to reflect the test, for example generator-test21.2.
    • Also configure this name in the generator. Click here for details
  • go inside the unzipped generator folder and link it to your npm
Yo Generator Links
Yo Generators
  • init the new test project with the new generator (here yo csui-21.1-standard). Then wait and check, if there are any issues. You can ignore minor issues, as long as the folder is initialized.
  • install the demo widget from the generator by typing yo <your-generatorname>:widget. Do not try to install the demo widget from different sources, you want to test if the generator runs.
  • run grunt from the commandline for the new project
    • Should not indicate any issues.
    • in the out-module folder should be the module to install in the Content Server
    • in the out-release folder should be at least a json file and a bundles folder with content.
Output files

But if you get a result like this:

Non working SDK

then the generator is broken und the whole SDK wont work. You can try to grunt –force, but the results will be not defined. In this case, you should wait for a working version of the SDK.

If the thing is working, you should be able to install the module and see the hello widget in the perspective manager.

Happy Testing

Posted on

Yeoman & generator-csui-extension secrets

Yeoman and smartUI

Have you ever wondered about the yeoman and the genererator-csui-extension? And whats going up in the somewhat bumpy installation and generation of a project dir? This are the Yeoman & generator-csui-extension secrets.

Yeoman & generator-csui-extension secrets: Lets unveil this secrets

First, recap the installation steps from scratch:

  1. Download and install node.js Version 11.15.0 (In you try a newer version, you will be rewarded by the famous primordials not defined error on starting yo, see this post )
  2. Set npm (part of node.js) to npm version 3 globally (npm install -g npm@3 (I am using 3.3.10)
  3. Install the grunt cli globally (npm install -g grunt-cli@1)
  4. Optional path: Unpacking the sdk and setting up the sampes)
    1. Unpack the SDK in a folder (p.ex. sdk)
    2. go inside this folder
    3. Use npm to install all requirements (npm install)
    4. Then you can start the internal webserver (Default under post 7777) by npm start and browse to sample-index.html inthis dir. Here you will get a listing of certain samples.
    5. The doc folder contains a very basic documentation of the smartUI SDK
  5. But for practical work, you need to gererate at least one project folder. This is a complete structure, containing the actual sdk and a place to build your own packages. So lets generate a project folder named project
    1. Preparation, only to do once
      1. unpack the gererator-csui-extension to a dedicated folder (p.ex. generator)
      2. While not(!) in this folder, install yeoman globally (npm install -g yo@1)
      3. go inside the folder generator
      4. link this as an extension to npm (npm link)
    2. Lets generate the project folder
      1. make the folder named project
      2. go inside the folder named project. Its empty
      3. Start yo to execute the csui-extension (yo csui-extension)
        1. you need to define the name of your oscrippt module and the requirejs base name. Then its doing a lot.
        2. Now your project is really full. You can optionally add a demo widget (yo csui-extension:widget)
      4. Now, build the project (grunt)

Ok, now the project folder project is operable. Lets take a close look on the generator.

(Remark: The versions mentioned are the working versions in my dev machines. Other, newer versions may work, but this is not guaranteed.)

Close Look at the Generator

When you do a npm link, a symbolic link is is build from the folder to [roaming dir]\npm\node_modules\generator-csui-extension.

Symlink Generator and Yeoman

So the extension folder is used as input for the yo execution.

Our Generator source folder looks like

Mann Content of the Generator

The app folder here is interesting

App folder of the Generator

First lets take a look on the rest of the templates folder

Some deeper folders in the hierarchie

Here we see, we have the same structure as lib…. in the sdk. SO the complete SDK is copied fron the generator folder to the project dir unter lib. There is no need to use the sdk folder (except for docs and samples)

A closer look at index.js (Excerpt). This file is executed during “yo csui-extension”.

Index.js

Here you see, the whole structure is copied directly from the templates folder to the destination project. All contents in this templates folder are later in the project folder.

A closer look at package.js

Package.js

The package.json contains as always the definition of this generator extension like, name, description and depedencies of this extension.

Areas for Customizations are at this areas (for example):

  • Custom gruntfiles, which shoulkd apprear in all new generated project folders
  • A different setup for the linters which should apprear in all new generated project folders
  • Added libraries
  • Added documentation structures

How to do this

Simply modify the generatot folder, add your customizations and modifications. You can save this folder as .zip to distribute internal standards.

Happy Customizing

Posted on

New in 21.1: Search MyAssignments Widget

The new Search Box

A minor improvement in OpenText’s new Content Server 21.1 is the addition of a Search Box in the MyAssignments Widget in smartUI.

The new MyAssignments Search Box - not expanded

Here, the MyAssignments widget is marked. To marvel at the new Search Box, you need to expand the widget.

The new MyAssignments Search Box - the Loupe

Then click on the loupe

Next, the Search Box is displayed.

The new MyAssignments Search Box -the Search Box

Happy Searching

Posted on

New in 21.1: Folder-Templates

The latest addition in OpenTexts Template technology are Folder-Templates.

Reason for the new Folder-Templates:

Here is a couple of use cases:

  • Create a folder from template within in Workspace: Create some optional folders (not applicable to every Workspace) with predefined folder names, folder permissions, etc.
  • Create folder from template in the enterprise directory: Create a hierarchical structure with predefined folder names, folder permissions, etc

Folder-Templates – How do they work?

Lets explain this in a step-by-step example:

  1. Create the Top Folder structure in “Content Server Document Templates”. Dont forget to add the Classifications according to your schema. Here the main structure is named “Stock Plan”

2. Create the folder structure as required.

3. Add the folder structure at any connected workspace you like. Here a smartUI based workspace is displayed. At the “+”, you can add the Folder Structure “Stock Plan” by one simple click.

5. Then the folder structure is added. The clock icon is a smartUI indicator, that this structure is new. (See my posts on this topic)

Annd there are all subfolders defined.

All Classifications, Categories etc applied to the template will also be present at this copy, like in any other template.

The Sky is the Limit!

Happy Templating.

Next week we’ll discuss the Improvements in Content Intelligence (3 new Widgets) and the Modifications in the Webreports in the amazing new Version 21.1 of Content Server.