IBM BPM Tips Q&A - Recent questions and answers in Coach Views

coach wizard

Tue, 17 Oct 2023 03:22:55 +0000

How to create a wizard using Coach Views

Rich text - upload image

Fri, 01 Sep 2023 15:46:33 +0000

Hi,

I am using IBM BAW, I want to use the Rich Text component, but when I click on the 'Image' item, the editor does not have the upload option enabled. I need to upload files from my PC.

I know that IBM BAW uses a third party library for this component - https://www.tiny.cloud/

Is it possible to enable the upload function with javascript?

Thank you.

how can I create tree view please?

Mon, 30 May 2022 09:37:10 +0000

Hi,

I want to create a view with a tree, which can facilitate my access to data by level and sublevel.

I need your help please, if there is a piece of code or a toolkit and thank you in advance.

Best regards

What are the UI technologies used in spark toolkit CV's?

Wed, 09 Feb 2022 07:14:32 +0000

How to get the control name of a Button control in a coach view

Wed, 12 Jan 2022 10:30:12 +0000

I have a scenario, where a button "Test" is added on a coachview - CV1.(This CV1 is used in many CSHS and other CVs also).

Now i want to change the colour of the button dynamically and i can achieve it by

page.ui.get("/CV1/Test").setColorStyle("DANGER");

But in another CSHS , i have CV2-->CV1--> Test button, In that case i need to change it to

page.ui.get("/CV2/CV1/Test").setColorStyle("DANGER");

is there any way to get the path dynamically using some APIs based on the controlId of the button?

How to Generate PDF from coach View Data and attach that PDF as a Document ?

Tue, 10 Aug 2021 02:22:11 +0000

Need to generate PDF as Invoice from Coach UI Data and attache that generated pdf dirctly as Document attachment to same coach UI ?

How can we initialize the variable in CoachView

Thu, 08 Jul 2021 12:48:03 +0000

How to get row data based on row index in BAW Table

Tue, 25 May 2021 14:07:15 +0000

I'm using IBM BAW OOTB SparkUI Table. I created list of objects and mapped to table. With Single Select configuration i tried to get the row index but i'm getting message as "Selected row has index undefined". I tried all possible solutions across search but I couldn't fix it. I tried Event section to get the row index. Any code sample would be highly appreciated.

Verified all solutions

https://www.ibm.com/docs/en/baw/19.x?topic=toolkit-table

Answered: How to call a function from Button->Event

Sun, 21 Mar 2021 11:53:42 +0000

This is a bit of different scenario but this may help you understand complete solution.

Let’s take a problem statement and try to solve.

Problem Statement:

I have a table with three columns, Like –

When I select ‘No’ from the Selection column the other two cells of that row should be disabled and if I select ‘Yes’, cells should be editable.

Solution:

First we need to know the index of the Selection radio button –

// Get the row index of checked radio button
var index = me.ui.getIndex();

Then, we need to get the Coach View instance for the “Name” and “Value” cells of that row –

// sampleList1, name1 and value1 are the control ids of the table, name textbox and value textbox respectively

var nameView = page.ui.get('/sampleList1/name1['+index+']');
var valueView = page.ui.get('/sampleList1/value1['+index+']');

Next, we need to get the selected value of the radio button for that row –

me.getData()

Finally, to achieve the requirement, we need to combine the above piece of codes and add a logic to set the visibility of the textboxes based on the selected value of the radio button –

// Get current row index
var index = me.ui.getIndex();

// Get Coach View instance of the name and value textbox
var nameView = page.ui.get('/sampleList1/name1['+index+']');
var valueView = page.ui.get('/sampleList1/value1['+index+']');

// Set the visibility of the textboxes based on the selected value of the radio button

if(me.getData() == "Y"){
	nameView.context.options._metadata.visibility.set('value', "DEFAULT");
	valueView.context.options._metadata.visibility.set('value', "DEFAULT");
} else {
	valueView.context.options._metadata.visibility.set('value', "READONLY");
	nameView.context.options._metadata.visibility.set('value', "READONLY");
}

Custom coachview for calculating difference between two dates

Mon, 08 Mar 2021 10:11:36 +0000

I want to design a coachview to calculate difference between two dates.

autofit table

Thu, 24 Dec 2020 10:18:29 +0000

how to autofit table by content?

Tooltip on a table header

Wed, 02 Sep 2020 21:56:01 +0000

Hi,

I wanted to add a tooltip on the table header. Can someone please help me with this. I have tried to add a table insert the tooltip, unfortunately, the label heading was not displaying and when I select show label then the label was showing outside the table.

how to validate fields from validate event handler, any example ?

Wed, 19 Aug 2020 09:55:53 +0000

how can we validate any field from validation event handler, can any one help with example and syntax?

Answered: ONLYOFFICE in Ibm Bpm

Wed, 15 Apr 2020 01:48:05 +0000

Not totally familiar with OnlyOffice, does it provide REST API or other interfaces ?, we can possibly build a iframe based custom control to open the editor

Answered: What is prototype Level Event Handling in Coach Views?

Thu, 09 Apr 2020 17:17:33 +0000

https://youtu.be/RyYjT2dilBc

Answered: How can we create design time wysiwyg preview for our custom coach views/controls?

Mon, 06 Apr 2020 18:25:42 +0000

https://youtu.be/4D2MGqeE5q4

Answered: What is the life cycle of a Coach View in terms of sequence of event handlers?

Mon, 06 Apr 2020 17:26:29 +0000

https://youtu.be/6ZmjA-pLVTI

Answered: What is a shutdown hook, e.g. do some processing when user closes the tab/browser window?

Wed, 20 Nov 2019 19:12:18 +0000

In BPM UI toolkit there is an exit safeguard control which does this but is depcreated as of 8.6 version

Answered: In BAW Web PD where is the coach view/control palette?

Wed, 20 Nov 2019 18:54:04 +0000

If you are used to working in verison 8.6 or lower and come across a coach designer in BAW 19 you will notice that there is no coach view pallette on the right hand side. You will need to hover over a content area on the coach and a plus icon will appear from there you can reach to the control palette.

Answered: Does the order in which you include scripts in your custom Coach view matter?

Wed, 20 Nov 2019 18:51:12 +0000

Yes both for css and js includes the order in which they are included matters e.g. a library which uses jquery will need the jquery.js to be included before the library. same goes for css also since the order of css definitions matters.

Answered: In 8.6 onwards for Coach View behaviour there is a new section called "Header HTML" what is the purpose/benefit of that?

Wed, 20 Nov 2019 18:50:10 +0000

Header HTMl as the name suggests is useful for placing information which goes in the <HEAD></HEAD> tag of a html. e.g. javascript reference, css reference, meta tags etc.

Answered: How to get context path of REST API invocation?

Thu, 31 Oct 2019 19:45:33 +0000

var rest = this.context.contextRootMap.rest;

Answered: What is benefit of "stack" control?

Sun, 13 Oct 2019 11:51:30 +0000

Stack control of BPM UI Toolkit is very useful in scenarios where you want to combine multiple views e.g. steps of a wizard etc in a single coach. The control binds to an integer index and when the index changes the stack pane switches, this changing the entire view altogether.

It can also be used to create vertical tabs by adding a tab column to the left and connecting the tab actions to the index of the stack.

Answered: What is "Data Change" property for a Coach in CSHS?

Sun, 13 Oct 2019 11:48:55 +0000

Data Change is available as a new property in CSHS Coaches, this can be used to fire validations on change of data inside the Coach.

Answered: With CSHS can we use console.log in scripts?

Sun, 13 Oct 2019 11:47:50 +0000

In HHS the scripts were run on server side but in CSHS the scripts outside the coach are run client side so it is possible to use console.log("Some logging") inside a CSHS script also.

Answered: How can we minimize service flows in CSHS and do most of the navigation inside Coach?

Sun, 13 Oct 2019 11:43:56 +0000

With new features of BPM UI Toolkit and CSHS it is now possible to not have to many logic in the CSHS e.g. you define actions for your Coach and handle them in client side Javascript by creating service flows etc.

One way is to use the event handlers of the BPM UI Toolkit e.g. onLoad, onChange etc. Also if you have to switch between multiple coaches instead you can use the "Stack" control to present multiple views on the same Coach similar to tabs but difference being the tab header is not visible in "Stack". The stack control binds to an integer index and the value of the index determines which Stack is visible currently.

Answered: How can we deobfuscate javascript e.g. in Third Party Toolkits?

Sun, 13 Oct 2019 11:40:15 +0000

Almost all third party vendors for toolkits place the javascript code in an obfuscated manner by minifying the javascript

If you need to read the code to make some changes you can install JSTool plugin for notepad++ and do JSFormat on the code to convert it into legible view

Answered: How can you implement lazy loading using "Deferred Container" of BPM UI Toolkit?

Sun, 13 Oct 2019 11:34:23 +0000

Deferred container has a option to lazy load automatically after a certain defined delay or it can be set to not lazy load automatically. In the latter case e.g. on selection of a tab or a check box you can lazy load the container as follows

var defsec = page.ui.get("/Template/SomeDefferedSection");

if (!defsec.isLoaded()){
defsec.lazyLoad();
}

Answered: How can you access all coach views placed inside a content area in a Custom Coach View?

Sun, 13 Oct 2019 11:30:31 +0000

Sometimes when you are creating a custom control you need to select all child Coach Views inside a content area and do something with them e.g. move them to a jquery control etc.

This can be done as follows
var subviews = this.context.element.querySelectorAll("#resizer-layout > div > div");

then you can do something with the child views

var rows = [];
for (var i=0; i < subviews.length; i++){
rows.push({template:subviews[i].id, content: subviews[i].id});
if (i < subviews.length-1){
rows.push({view:"resizer"});
}

}

Answered: What is a CSS selector and what are the various ways of doing CSS Selection?

Sun, 13 Oct 2019 11:25:55 +0000

In CSS, selectors are patterns used to select the element(s) you want to style.

You can see the various options for selectors at this reference

https://www.w3schools.com/cssref/css_selectors.asp

Answered: What is a weight in CSS?

Sun, 13 Oct 2019 11:23:12 +0000

he font-weight values, from 100 to 900, reflect typographic practices of designing different-weight typefaces of a font. Very few fonts have all those weights, but the scale has been selected to cover, more or less, the different weights used. The CSS3 Fonts draft describes a correspondence between the numbers and traditional typographic terms such as Thin, Extra Light, etc., but terminology really varies.

In typography, each weight is a separate typeface designed by typographer. This is one reason why most fonts have just two, or maybe just one, weight: it takes time to design a typeface, and time is money. Another reason especially applicable to fonts as used on the web is that display devices have been rather coarse, making fine typography often a rather pointless attempt. In particular, small font heights don’t work well on low-resolution devices.

The CSS specifications define an algorithm for mapping declared font weights to available weights. For example, when only weights 400 and 700 are available (the usual situation), then weights 100, 200, and 300 are mapped to 400.

However, in some cases browsers algorithmically bold glyphs. This is more of a problem than a solution, and due to browser differences, it may cause odd things if you ask for a nonexistent weight. Most browsers seem to use algorithmic bolding if a weight of 600 or more is requested for and the font only has normal (400) typeface. For example, setting font-weight: bold when text is in Arial Unicode MS (which has no bold typeface) creates an artificially bolded version of Arial Unicode MS.

There are additional problems with commonly available fonts. Sometimes you need to use a typeface name as if it were a font name, e.g. font-family: Arial Black instead of the logical setting font-family: Arial; font-weight: 900. Sometimes this does not work, since on some browsers only the logical way works.

As a rule, don’t try to use other weights than normal and bold unless you use downloadable fonts (web fonts) via @font-face, which gives you control over the font weight issue. Most fonts that can be used as downloadable contain just the two basic weights, or just one, but there are interesting free fonts with several weights.

Answered: Difference between document.querySelectorAll() and this.context.element.querySelector()

Sun, 13 Oct 2019 11:21:08 +0000

document.querySelectorAll() will get you all matching elements in the entire document whereas this.context.element.querySelector() or this.context.element.getElementsByClassName() will limit your search to the elements defined or created inside the current coach view. This is useful to create custom controls which will not affect other instances of the control.

Answered: How can you implement a unique ID for Custom Coach Views which are used in a repeating manner e.g. CV placed inside a Table Column?

Sun, 13 Oct 2019 11:16:39 +0000

If you create a custom coach view and place it inside a repeating construct like Table the view index is not automatically added to the Coach View and you may get undesired results

One way to handle this is if you have a OOB CV inside your control you can piggy back on the id of that CV to set the id of the parent Coach View elelemts

var viewid = _this.context.viewid;
viewid += _this.context.element.getElementsByClassName("Vertical_Layout")[0].id;
_this.context.element.querySelectorAll("div")[0].id = viewid + "-example";

what is difference between me.ui.get(), this.ui.get() and page.ui.get()?

Sat, 12 Oct 2019 12:06:16 +0000

Answered: Can we use Popovers for data Entry i.e. Custom Popover Control with ability to place a Coach View inside it?

Thu, 29 Aug 2019 09:39:20 +0000

Dosvak UI Toolkit has such a control, you can attach coach view or multiple coachviews inside it

Dosvak UI Toolkit

Answered: How to get full path of a coach view beginning from the root of the document ? page.ui.get("fullpath") needs a fullpath to resolve items

Thu, 29 Aug 2019 09:29:13 +0000

page.ui.getContainerPath(view)

${Button1}.getAbsoluteName(path)

Answered: How can we create a search List using BPM UI Toolkit ? e.g. when you start typing it filters the list by search text

Sun, 28 Jul 2019 18:02:32 +0000

BPM UI toolkit can be extended by composite controls like this one, this has been added to Dosvak UI Toolkit available

Answered: BPM UI toolkit does not have a dual-list How can a dual-list composite control be created using BPM Ui Toolkit ?

Sun, 28 Jul 2019 17:28:53 +0000

You can create a composite control by using the elementary controls and create buttons for move all, move selected. This control has been added to the Dosvak UI toolkit.

Answered: Can Someone provide a working example of a custom Slider Control Coach View in IBM BPM 8.x?

Sun, 28 Jul 2019 15:36:57 +0000

The Out of Box Slider control in the BPM UI Toolkit is missing the tick marks, labels for selection ticks etc, seeing the need for a fully customizable slider control we have created a Responsive control in the Dosvak UI Toolkit for it it can be downloaded from Gitlab Location

Answered: How can we build a custom Control for Bootstrap Jquery TreeView with ability to identify which row was selected/clicked?

Sat, 27 Jul 2019 15:23:43 +0000

Bootstrap Treeview using Jquery is a js library the following control has been built using that, it expects a JSON in a certain format

var myTree = [
    {
      text: "Item 1",
      nodes: [
        {
          text: "Item 1-1",
          nodes: [
            {
              text: "Item 1-1-1"
            },
            {
              text: "Item 1-1-2"
            }
          ]
        },
        {
          text: "Item 1-2"
        }
      ]
    },
    {
      text: "Item 2"
    },
    {
      text: "Item 3"
    }
    ...
];

There are configuration options like fontSize, fontColor, backgroundColor, width, initially Expanded to Level, on selection it has a event handler defined and also a config option is updated with the selected row text so that you can do necessary processing after that e.g. firing a boundary event or other actions.

It is now part of Dosvak UI Toolkit and latest version can be downloaded from Dosvak Gitlab

Answered: How can we build a accordion control using Collapsible panel of BPM UI Toolkit ?

Fri, 26 Jul 2019 22:37:02 +0000

Collapsible Panels can be improvised with a composite control where in on expanding a certain section the remaining sections can be closed except the current one which creates a accordion effect. Following code does the above

var myindex = me.ui.getIndex();

//alert(myindex);

for (var i=0; i < ${Accordion_Data1}.getData().items.length; i++){

if (i != myindex){

var str1 = "../Accordion_Collapsible_Panel1"+ "[" + i + "]";

if(me.ui.get(str1).isExpanded()){

me.ui.get(str1).collapse();

}

Answered: BPM UI Toolkit breadcrumbs are missing the active step indicator and style options are limited? Any alternatives

Fri, 26 Jul 2019 22:08:08 +0000

Looks like there is no way to identify the current step in the OOB breadcrumbs and style is also flimsy, identifying the need we have created a custom control which is added to the Dosvak UI Toolkit.

This control is called Advanced Breadcrumbs and has four styles to choose from

Basic

Triangle

Multi-Step

Numeric Progress

It has configuration selection for the four styles, provides on click event handler and you can specify the label of the current item as a configuration. You need to provide a NameValuePair list of step names as name element and icon as value. e.g.

var autoObject = [];

autoObject[0] = {};

autoObject[0].name = "Entry";

autoObject[0].value = "fa-home";

autoObject[1] = {};

autoObject[1].name = "Review";

autoObject[1].value = "fa-search";

autoObject[2] = {};

autoObject[2].name = "Approve";

autoObject[2].value = "fa-thumbs-up";

autoObject[3] = {};

autoObject[3].name = "Finalize";

autoObject[3].value = "fa-database";

On click it will trigger the event handler as well as set the binding of the control to the selected item.

Answered: How can we get url of a managed file inside a coach view ?

Mon, 22 Jul 2019 14:53:32 +0000

com_ibm_bpm_coach.getManagedAssetUrl = function(assetName, assetType, projectShortName, returnWithoutAssetName)

e.g.

com_ibm_bpm_coach.getManagedAssetUrl("somefile.png", com_ibm_bpm_coach.assetType_WEB, "MYPR", false)

detailed reference

Answered: Can we dynamically add tabs based on a list of complex object ? is an example possible?

Sun, 21 Jul 2019 15:05:09 +0000

Attached is a working custom control called "Advanced Repeating Tabs" which takes a list input and shows the same Coah View repeated for each element of the list, it has tabs on top and tabs on left configurations also you can bind any list element to the label and each tab will show that label based on the list items. You can enable/disable addition and deletion of tabs. When you add a new tab an Unittled tab appears with the same repeated Coach View, when you enter the values connected to the label the label of the tab changes.

The Download is as part of Dosvak UI Toolkit located at Dosvak Downloads

Answered: How can a Task context based autosave Coach View created and implemented ?

Sat, 13 Jul 2019 08:03:35 +0000

You can implement a autosave Coach View by usins a timer control or creating a custom java script timer, you will invoke this.context.trigger() on it and connect the boundary event back to the same coach, once the boundary event is triggered the coach context is saved and even if the user closes the coach/task the data is saved in the context and will reappear when the task is relaunched.

Answered: What is a variant control ?

Sat, 13 Jul 2019 08:01:24 +0000

A variant control is a Coch View which behaves differently depending on bound data e.g if you bind an integer it will appear as a number input and if bound to string will work like a string input. This is part of BPM UI Toolkit/Spark UI toolkit.

It is also possible to create a custom variant control which depending on bound data or a bound configuration appears differently based on business data e.g. for a certain department it appears as a input box or appears as a drop down for another department.

Answered: How to dinamic ${name[i]} ?

Thu, 30 May 2019 03:32:52 +0000

I use eval javascript function :-)

Answered: How to make childcoach views lazy load..

Mon, 20 May 2019 02:43:36 +0000

You can use the Deferred Section control for lazy loading.

Answered: How to change the position of the label to left from top for text controls in client side human service

Mon, 20 May 2019 02:30:43 +0000

In 8.6 , inside the configuration-> Appearance window of every Control we have a Label placement . we can change it accordingly.

Answered: What are the multiple ways of invoking an ajax service both internal and external ?

Mon, 20 May 2019 02:16:16 +0000

I know the One way this is onclick of a button you can call your service by using ${servicecontrolid}.execute() method.

you can use this on load of a page also.