Tag: smartUI SDK

Posted on

Conditional Configuration with require.js in OpenText smartUI

Optional loading of modules

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
The main View with the config.js declaration

This will load configration values like

Top of a configuration module
End of the configuration module
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.

Optional declaration

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

The require.js optional module

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 to merz at ebit-company.de stating the purpose of the widget and requesting a qoute

Posted on

Routers in OpenText SmartUI

greetall screenshot

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

The greetings router

_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 route
URL localhost/cs162/cs.exe/app/greetings called
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.

Posted on

The Connection Object in smartUI

Setup of the Connection Object

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

Setup of the connection object

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.

Posted on

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)

dependo output

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.

Posted on

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

  1. find the node id of the the object to examine.
  2. find the categories attached to this node (Red Arrow in the Screenshot)
  3. 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)
  4. 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.

i

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 to merz at ebit-company.de stating the purpose of the widget and requesting a qoute

Posted on

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 to merz at ebit-company.de stating the purpose of the widget and requesting a qoute

Posted on

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 to merz at ebit-company.de stating the purpose of the widget and requesting a qoute

Posted on

Agenda of the new 16.2.10 smart UI advanced Workshop

“Extended SDK Parts” 1.5 days

Content:

  • Additional Widgets
    • Webreports
      • NodesListReportView
      • TilereportView
      • FilteredCountChartView
      • Carousel Widget View
      • parameter.prompt.form
      • table.report
      • status.screen
      • open.webreport.js (action to show the Parameters form)
  • 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
    • Header
    • xECM: Office365 Groups
  • Extended ECM
    • xECM: Header Widget with Business Object Infos
    • xECM: Snapshot of current document Attachments
    • xECM: Dossier View Widget
    • Event Action Center
  • Widgets not part of the SDK
    • Mobile Scanning
    • Discussion Widget
    • Engineering Doc Management: Search
    • MyShares

“Extended SDK Features” 0.75 days

Content:

  • Build Language Packs for Internationalization
    • How to build an English language template
    • How to build the language pack
  • Commands
    • Implementation and Inheritance from “CommandModel”
    • Best Practices
    • Attributes, Methods
    • Using Commands
  • Custom URL Router.
    • Routing, adding custom Routers.
    • Using Routers as Navigation.
    • Perspective Routers
  • Authenticators and Regions
    • Authenticators
    • Non-Attaching Region
    • Non-Emptying Region
    • Script Executing Region
  • Behaviors. What are Behaviors?
    • DefaultActionBehavior
    • ExpandingBehavior
    • InfiniteScrollingBehavior
    • PerfectScrollingBehavior
    • Search Behavior
    • CollectionErrorBehavior
    • CollectionStateBehavior
    • ItemErrorBehavior
    • ItemStateBehavior
  • Mixins.
    • What are Mixins?
    • Discussion of the main mixins
      • LayoutViewEventsPropagationMixin
      • ViewEventsPropagationMixin
      • AutoFetchableMixin
      • NodeAutoFetchableMixin
      • ConnectableMixin
      • NodeConnectableMixin
      • FetchableMixin
      • ResourceMixin
      • NodeResourceMixin
      • UploadableMixin
      • CommandableMixin
      • ExpandableMixin
      • AdditionalResourcesV2Mixin
      • V2CommandableMixin
      • ExpandableV2Mixin
      • FieldsV2Mixin
      • RulesMatchingMixin
      • SyncableFromMultipleSourcesMixin
  • Browsable Support for Collections.
    • Using the “Browsable” support for Model-Collections.
  • Widget Options for the Perspective Manager
    • Wire up your widget options that they can be configured at the Perspective Manager Level

“Additional things to consider” 0.75 days

  • Tips and Tricks
    • 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
    • CKEDITOR 4 new
      • Intro
      • JQuery Non-SDK example
      • Usage in the SDK
    • 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
    • D3 new
      • What is D3
      • Basic Elements
      • Zooming and Panning
      • D3 in the smartUI SDK
    • Moment new
      • What is Moment?
      • Performing Time Calculations
    • Alpaca new
      • What is Alpaca?
      • Content Server Support for Alpaca
      • Alpaca Tutorial

“One or two more things” 0.5 days optional

  • 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

1 Day optional Discussion of actual problems

Discussion of actual problems

Here actual problems from the widget development are discussed. This part has to be discussed and defined in advance.

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

Posted on

Agenda of the new 20.2 Smart UI Base Workshop

CSUI Components

Day 1 (10:00-17:00)

Chapter 1

Agenda. A short introduction to this agenda

Chapter 2 The different GUIs.

The new smart GUI. How smartUI works. Setting up landing pages with the new GUI. Using Perspectives and build them with the Perspective Manager. Use Webreports to build custom widgets. The new perspective element and the difference 20.2 to previous versions.

Using widgets on another portal w/o content server.

Exercises:

  • Build a custom perspective
  • Build a custom widget based on a web report

Content:

  • Chapter 2.1: The different UI Possibilities
    • Examples: Connected Workspaces
    • Examples: xECM
    • Examples: Documentum D2 Smart View
    • The Big Picture. See the GUI components in the Content Server Environment
    • Functional Components of the smartUI SDK
  • Chapter 2.2: smartUI Overview
  • Chapter 2.3: Diving deeper in the smartUI
    • Role-Based Content Server Pages
    • User Interface
  • Chapter 2.4: Perspectives Overview
    • Scenario: Creating a new Perspective
  • Chapter 2.6: The Perspective Manager
    • General Information
    • Rules for Role-Based Perspectives
    • Layout Behavior
    • Configure Widgets
  • Chapter 2.6: The Toolbox. An overview of the visual components in the SDK. The usage will be discussed later in the SDK

Day 2 (9:00-17:00)

Chapter 3 REST

REST. What is REST? Overview of REST Services

Chapter 3.1 REST. Consuming REST Services with Postman.

  • Using REST Services.
    • Authenticate a User
    • Test a REST Operation in Postman
    • Filtering and Expanding Data in the request
    • REST API Clients
    • Tips and Tricks.

Exercises:

  • Use POSTMAN to get used to REST, Authenticate in REST
  • Try several REST commands and get an overview over the various options
  • Build a REST based html page, which queries a node

Chapter 3.2 Extending REST Services.

How to build a new REST Service in OSCRIPT.

Exercises:

  • Build a custom REST Service in a new Content Server Module. Later in Chapter 10, this REST Service will be modified and be the server-side base of our first widget

Content:

  • Handling Requests with REST API
  • RESTful object
  • Create a module for REST extension
  • REST API module in Content Server 20.x
  • Resources, actions and prototypes
  • Adding parameters to the prototype
  • Test a new REST resource
  • Tips and Tricks for REST Services with smartUI
    • Table Query inside a REST Service
    • Getting nodes with complex categories
    • Handling complex Categories

Chapter 4 A very short intro to JavaScript Patterns.

That’s what any developer of the SDK sees inside the SDK. A short tour through the JavaScript patterns required to understand the SDK and the underlying frameworks. This is based on Stefanov “JavaScript Patterns” O’Reilly, ISBN 978-0-596-80675-0, which is very recommended. Some new Aspects of ECMA6, Promises, Deferrals are also discussed

Content:

  • Introduction and References
  • ECMAScript Versions
  • Chapter 4.1 The Patterns
    • Promises
    • JQuery Deferred
    • XMLHttpRequest
    • Immediate Functions
    • Immediate Object Initialization
    • Function Properties—A Memorization Pattern
    • Configuration Objects
    • Function Application (also with smartUI examples)
    • Schönfinkelizing or currying a function
    • Mix-In Inheritance copy all properties to a child
    • Borrowing Methods
  • Chapter 4.2: Object Creation Patterns
  • Chapter 4.3: Sugar methods
  • Chapter 4.4: Object Design Patterns
    • Singleton
    • Object Decorators (used quite often in the smartUI SDK)
  • Chapter 4.5: DOM and Browser Patterns
    • Web Workers (only in recent browsers) long running scripts

Day 3 (9.00-17:00)

SDK Infrastructure Intro

Chapter 5 SDK Infrastructure Intro

Introduction to Infrastructure needed for the SDK. All components and frameworks will be introduced. Introduction to Backbone with a Tutorial, Marionette as the extension of Backbone is also covered by a tutorial.

Exercises:

  • Backbone Tutorial. Building a browser-based TODO List
  • Marionette Tutorial. Extending the TODO List with Marionette

Content:

  • Chapter 5.1: Bootstrap
    • A CSS and JS framework as the base of smartUI
  • Chapter 5.2: Node.JS
  • Chapter 5.3: Require.js
    • Overview
    • How to use require.js.
  • Chapter 5.4: Backbone.js
    • Views
    • Events
    • Models
    • Collections
    • Routers
    • Models and Views
    • Collections
    • View Rendering
    • Routing with URLs
    • A simple Backbone Tutorial
  • Chapter 5.5: Marionette.js
    • Marionette Views – Layouts
    • Marionette Views – Regions
    • Tutorial: A simple Backbone-Marionette App
    • Recommended Tools
      • Backbone Debugger
      • Marionette Inspector
    • Python based client for mozilla-marionette
  • Chapter 5.6: Handlebars.js (Overview, more in depth in the advanced training)
    • A html template framework
    • Handlebars SDK usage
  • Chapter 5.7: Yeoman
  • Chapter 5.8 Grunt.js
    • Tasks Configuration
    • Starting grunt
    • Some examples of GRUNT tasks
    • CSUI sdk custom grunt tasks
  • Chapter 5.9 Additional Libraries. Here the libraries are quickly discussed. For a more in-depth discussion, please refer to the Advanced Workshop.
    • Short Overview of D3, the interactive SVG Graphics package inside the SDK
      • D3 GANTT Chart example
    • Short Overview of Alpaca, the forms package inside der SDK
      • Alpaca Example
      • Alpaca Support in the Content Server
  • Chapter 5.10 Additional Infrastructure
    • Python
    • CORS – Cross Origin Resource Sharing Chrome Plugin
    • Inkscape/wingrep/fiddler
    • SVG viewer
    • Markdown

Day 4 (9:00-17:00)

Chapter 6 smartUI Intro BASIC

What is the SDK, Prerequisites, documentation? Download and install the SDK.  Examine the structure. Style Overrides, an overview. We look at all framework homepages to find examples and documentation. Using fiddler to examine underlying functionality. What’s possible with the SDK. Discussion of how to add new node types, new commands. Discussion of the controls and the widgets in the SDK (basic level).

Exercises:

  • Find the SDK and download the SDK
  • Install the SDK
  • Build a Project Directory
  • Prepare the Demo Widget “Hello”
  • Install this in the CSIDE Module from Chapter 4
  • Test this widget in the Perspective Manager

Content:

  • 6.1 Introduction
    • Content of the SDK
    • How to develop
      • JS IDE Webstorm
      • JS IDE Eclipse
      • Notepad++
  • 6.2 Installing the SDK.
  • 6.3 Building the Demo Widget
  • 6.4 CSS Style Overrides Binf (OpenText Bootstrap Version)
  • 6.5 General Overview
    • General Architecture
    • Coding Guidelines
    • csui.onReadyx  
    • Logging, Internationalization and Localization
  • 6.6 Content of the SDK
    • The Connection Object
  • 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 (depreciated in 16.2.10)
    • Shortcuts
    • Metadata
    • NodesTable
    • Thumbnail
    • DocumentOverview
    • Search Results
    • node.state
    • Permissions and Permission Explorer
    • Html.editor
    • Navigation Header
  • 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
      • Error
      • Form – with alpaca.js
      • Globalmessage
      • Grid
      • Zip&Download
      • Visual Count Control
      • 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

Day 5 (9:00-16:00)

Rest of Chapter 6: SDK

The remaining parts of yesterdays SDK intoduction

Chapter 7 Mockup Data and Testing

MockJax is used to mock up data (no need for a Content Server during development of a widget) and the Jasmine Framework is used to for the testing of the widgets or other JavaScript modules

Content:

  • Mocking Up Data
  • MockJax
  • Setup and Usage
  • Jasmine Usage

Chapter 8 The anatomy of the example widget Hello.

A detailed voyage in the source of the widget. (Explanation of all js files, the test folder, css and language settings)

The Chapters 9-11 are exercises. Chapter 12 is a Real-Life Demo/Exercise. Depending on the time left, these parts can be cut down.

Chapter 9 The anatomy of the myAssignment Widget.

A detailed voyage in the source of the widget. (Explanation of all js files, the test folder, css and language settings)

Chapter 10 Add another Widget to the one already loaded.

Recap the complete workflow how to implement a widget from Unit7. Add the Greeting Widget (another simple Widget from the samples) to the Greetings Widget.

Exercises:

  • Add the Greeting Widget to the Content Server
  • Test using the Perspective Manager
  • Modify the widget (by doing several things as implementing a control from the library)

Chapter 11: Build a custom Widget (optional)

Our First Widget.

Use the Hello Widget, modify it to call the REST Service we build in Unit 3.2. Modify this REST Service to provide a better JSON Structure.

Exercises:

  • Modify the Hello-Widget. Add a model for our REST Service. Add a handlebar template to output our greetings from the server. Add some css effects

Content:

  • Subdirectory Structure
  • Some Changes to our REST Service
  • Files to create
  • Add mockup support, once the answer is clear defined
  • Test with index.html
  • Start „npm start “the local server in the dev folder
  • Compile the new bundles file with grunt
  • Install on Content-Server
  • Open the perspective manager
  • Problem with Chrome. Official Chrome BUG: (Issue 611328 https://bugs.chromium.org/p/chromium/issues/detail?id=611328)

Chapter 12: Strategies to “widgedize” an existing legacy gui module and to add things to an existing module (optional)

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. In the complete practical workshop, these widgets are implemented also on the Server side, whereas here no server implementations are made.

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 module
  • Add a functionality in an existing widget
    • Add an email functionality in the Connected Workspaces Team Widget.
    • Usable from inside the Widget

Handouts and Class Material

A share accessible for all attendees as source of this handouts is required.

Handouts

  • Reiner’s Cheat Sheet for CSUI Widgets
  • Reiner’s CSUI Workflow Cheat Sheet (advanced Session only)
  • Backbone.js Offline Manual (Offline Webpage)
  • Bootstrap 4 Cheat Sheet (Offline Webpage)
  • REST Demo guides Memberinfo and Nodeinfo
  • REST Demo Guide Create a REST Service

Class Material

  • Backbone Tutorial TODO Application
  • Marionette Tutorial TODO Application
  • Our first homemade widget
  • REST Exercises
  • myfirstNode.js
  • Material for Chapter 12 including the client side js apps

Training conditions

  • The training is remote using Microsoft Teams in these Corona times.
  • The training materials are in english, the trtaining lanbguage is english or german, depending on the geographical location.
  • The customer needs to setup a stand alone training VM with a Content Server and Database. A copy of these machine must be provided as the Trainer Machine to us, on which the training is held.

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

Posted on

New 16.2.10 Content Server Smart UI Advanced Workshop

This is a 4-5 days’ Workshop covering the additional Parts of the SDK, the xECM, Webreports, Workflow etc. Modules. Here, some of the more advanced concepts are discussed, like how to make Widgets configurable in the Perspective Manager.

Also, there are overviews of D3 (Graphic Package) and Alpaca (Forms Package) inside the SDK. The complete Training is configurable.

See the complete Agenda here

Data Protection Declaration Proudly powered by WordPress