Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hi Alexander and Lakshya,

I played with this a bit, and I want to share the general methodology for customizing Workplace.  The Workplace you are interested in customizing is the CSHS incarnation, so you start by creating a copy of the top-level Workplace Process App.  If you use the URL in the overview of the Workplace CSHS, then you should get a fully functioning, exact copy of the original Workplace.  This is your starting point.  The top-level Workplace CSHS, as Dave points out, just points to a nested CSHS, which is in the Workplace toolkit.  You want to customize this aspect of the UI, so you expand the Workplace toolkit and choose to copy the item to your current Process App:

Next, you change the Workplace CSHS to point to the new nested CSHS that you just copied over (mine is called Workplace 2):

Important!!  Be sure to map variables and replicate any other setup from the original setting.  In my case, I noticed that the inputs and outputs were blanked out, so I had to remap them:

This pattern of copy, replace, reconfigure is common to all aspects of Workplace that you want to customize.  You mention that you wanted to remove the statistics at the top and replace them with instructions, so let's continue down that path.  Opening the copied "Workplace 2" nested CSHS, and looking at the canvas, we can see that the "Workplace Layout" is responsible for the stats area, but this View is read-only and in the Workplace toolkit.  So what do we do?  Copy, replace, reconfigure!!

After copying Workplace Layout into my new Process App, and pointing Workplace 2 to the copied View, we can now drill into this View and make customizations.  Note that the configuration of the View did NOT get erased in this case, so I just had to do a simple View replacement.  In the Workplace Layout, there is a "Task Statistics" view, and we can remove it:

And then add something else for the description (I used an HTML block):

Running Workplace at this point exhibits the issue that you mention: the header does not show properly.  There are errors in the console, and they point to the load handler for the Workplace Page Switcher view.  It looks like this view is expecting a configuration item to be set, which is not available with a custom Workplace instance.  I think this is a defect, and I will follow up on it internally.  To work around this issue, I followed the above steps to also bring in the Workplace page Switcher to my Process App.  I then changed the Inline Javascript in this view to override and wrap the load() lifecycle function as follows:
var fileName = 'Workplace-Control-WorkplacePageSwitcher.js';

var path = (dojoConfig.isDebug === true) ?

  com_ibm_bpm_coach.getManagedAssetUrl(fileName, com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false) :

  com_ibm_bpm_coach.getManagedAssetUrl('Workplace-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false);

              path = (dojoConfig.isDeveloperMode === true) ? "workplace/files/" + fileName : path;

var _this = this;

require({async:false},[path], function() {

workplace_control_InitWorkplacePageSwitcher.call(_this, utilities, taskUtils, wpResources, resourceUtils, domClass);

              var proto = Object.getPrototypeOf(_this);

              var oldLoad = proto.load;

              proto.load = function(){

                          this.context._workflowSaaSEndpointMap = {};

              this.context._workflowSaaSEndpointMap.workplace = "Your workplace URL";

                           oldLoad.apply(this, arguments);

              };

});

Now, when we run Workplace, it has the customizations that we were after with a working header:

One remaining issue in my scenario was that the copy link button beside IBM Workplace did not copy the full URL, likely because that view is stripping query parameters.  This could also be tweaked using the same approach.

Hope this helps,

Grant.

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hello Grant, 

Thank you very much for the help. I can verify that with your workaround I got the top header to display.

Unfortunately,  after removing the "Task Statistics" View from the "Workplace Layout" View, the "Workflows" Tab is not loading again with a similar error: "TypeError: Cannot read properties of undefined (reading 'instance')". Any additional idea what is going on? 

In total we are trying to achieve the following customizations:

1. Removing the "Task Statistics" View and the Statistik Toggle Button (Statistics_Icon) from the "Workplace Layout" View.
2. Removing the Description from the "Workflow Card" View. I saw that this is possible via modifying the "Workflow Card" View but after changing the necessary components the Workflows can no longer be launched as "Start" Button is disabled. 
3. Changing the Title of the Header Bar. In the "Workplace Layout" View there are 2 config options "titleLabel" and "brandLabel" but it seems that setting those does not change anything.

Thank you very much in advance for your help!

Greetings, 
Alex

Hi Alexander and Lakshya,

I played with this a bit, and I want to share the general methodology for customizing Workplace.  The Workplace you are interested in customizing is the CSHS incarnation, so you start by creating a copy of the top-level Workplace Process App.  If you use the URL in the overview of the Workplace CSHS, then you should get a fully functioning, exact copy of the original Workplace.  This is your starting point.  The top-level Workplace CSHS, as Dave points out, just points to a nested CSHS, which is in the Workplace toolkit.  You want to customize this aspect of the UI, so you expand the Workplace toolkit and choose to copy the item to your current Process App:

Next, you change the Workplace CSHS to point to the new nested CSHS that you just copied over (mine is called Workplace 2):

Important!!  Be sure to map variables and replicate any other setup from the original setting.  In my case, I noticed that the inputs and outputs were blanked out, so I had to remap them:

This pattern of copy, replace, reconfigure is common to all aspects of Workplace that you want to customize.  You mention that you wanted to remove the statistics at the top and replace them with instructions, so let's continue down that path.  Opening the copied "Workplace 2" nested CSHS, and looking at the canvas, we can see that the "Workplace Layout" is responsible for the stats area, but this View is read-only and in the Workplace toolkit.  So what do we do?  Copy, replace, reconfigure!!

After copying Workplace Layout into my new Process App, and pointing Workplace 2 to the copied View, we can now drill into this View and make customizations.  Note that the configuration of the View did NOT get erased in this case, so I just had to do a simple View replacement.  In the Workplace Layout, there is a "Task Statistics" view, and we can remove it:

And then add something else for the description (I used an HTML block):

Running Workplace at this point exhibits the issue that you mention: the header does not show properly.  There are errors in the console, and they point to the load handler for the Workplace Page Switcher view.  It looks like this view is expecting a configuration item to be set, which is not available with a custom Workplace instance.  I think this is a defect, and I will follow up on it internally.  To work around this issue, I followed the above steps to also bring in the Workplace page Switcher to my Process App.  I then changed the Inline Javascript in this view to override and wrap the load() lifecycle function as follows:
var fileName = 'Workplace-Control-WorkplacePageSwitcher.js';

var path = (dojoConfig.isDebug === true) ?

  com_ibm_bpm_coach.getManagedAssetUrl(fileName, com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false) :

  com_ibm_bpm_coach.getManagedAssetUrl('Workplace-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false);

              path = (dojoConfig.isDeveloperMode === true) ? "workplace/files/" + fileName : path;

var _this = this;

require({async:false},[path], function() {

workplace_control_InitWorkplacePageSwitcher.call(_this, utilities, taskUtils, wpResources, resourceUtils, domClass);

              var proto = Object.getPrototypeOf(_this);

              var oldLoad = proto.load;

              proto.load = function(){

                          this.context._workflowSaaSEndpointMap = {};

              this.context._workflowSaaSEndpointMap.workplace = "Your workplace URL";

                           oldLoad.apply(this, arguments);

              };

});

Now, when we run Workplace, it has the customizations that we were after with a working header:

One remaining issue in my scenario was that the copy link button beside IBM Workplace did not copy the full URL, likely because that view is stripping query parameters.  This could also be tweaked using the same approach.

Hope this helps,

Grant.

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hi Alex,

Yes, I see that removing the stats controls seems to adversely affect other components.  You could override more controls, but I think the easiest solution is to just hide the statistics instead.  In my environment, I added the Task Statistics back and set the visibility:

To get rid of the header button, I also just hid the item with a little CSS in the Workplace Layout view:

Those two changes should address #1.

I had a look at #2, and again, you could override more components, but if you are just trying to hide content, I think CSS is the easiest route.  For views like these that do not have unique classes on them, I recommend using the "control-name" attribute from the element, as it should be consistent between sessions.  I added this to the same Inline CSS block:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard0/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard2/Description"]{ 	display:none; }

If you also want to make the tiles smaller, you can take a similar approach. I added these lines which seemed to do the trick:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1"]{ 	min-height:100px; }.Launch_list .SPARKPanel .workstreamCard .stat-panel{ 	min-height:100px; 	height:100px; } .Workflow_Card{ 	min-height:100px; }

The above resulted in the workflow launch screen looking like:

I'll have to get back on #3, as the change you made seems to be the right setting to me, but it doesn't work for me either.

Thanks,

Grant.

Hello Grant, 

Thank you very much for the help. I can verify that with your workaround I got the top header to display.

Unfortunately,  after removing the "Task Statistics" View from the "Workplace Layout" View, the "Workflows" Tab is not loading again with a similar error: "TypeError: Cannot read properties of undefined (reading 'instance')". Any additional idea what is going on? 

In total we are trying to achieve the following customizations:

1. Removing the "Task Statistics" View and the Statistik Toggle Button (Statistics_Icon) from the "Workplace Layout" View.
2. Removing the Description from the "Workflow Card" View. I saw that this is possible via modifying the "Workflow Card" View but after changing the necessary components the Workflows can no longer be launched as "Start" Button is disabled. 
3. Changing the Title of the Header Bar. In the "Workplace Layout" View there are 2 config options "titleLabel" and "brandLabel" but it seems that setting those does not change anything.

Thank you very much in advance for your help!

Greetings, 
Alex

Hi Alexander and Lakshya,

I played with this a bit, and I want to share the general methodology for customizing Workplace.  The Workplace you are interested in customizing is the CSHS incarnation, so you start by creating a copy of the top-level Workplace Process App.  If you use the URL in the overview of the Workplace CSHS, then you should get a fully functioning, exact copy of the original Workplace.  This is your starting point.  The top-level Workplace CSHS, as Dave points out, just points to a nested CSHS, which is in the Workplace toolkit.  You want to customize this aspect of the UI, so you expand the Workplace toolkit and choose to copy the item to your current Process App:

Next, you change the Workplace CSHS to point to the new nested CSHS that you just copied over (mine is called Workplace 2):

Important!!  Be sure to map variables and replicate any other setup from the original setting.  In my case, I noticed that the inputs and outputs were blanked out, so I had to remap them:

This pattern of copy, replace, reconfigure is common to all aspects of Workplace that you want to customize.  You mention that you wanted to remove the statistics at the top and replace them with instructions, so let's continue down that path.  Opening the copied "Workplace 2" nested CSHS, and looking at the canvas, we can see that the "Workplace Layout" is responsible for the stats area, but this View is read-only and in the Workplace toolkit.  So what do we do?  Copy, replace, reconfigure!!

After copying Workplace Layout into my new Process App, and pointing Workplace 2 to the copied View, we can now drill into this View and make customizations.  Note that the configuration of the View did NOT get erased in this case, so I just had to do a simple View replacement.  In the Workplace Layout, there is a "Task Statistics" view, and we can remove it:

And then add something else for the description (I used an HTML block):

Running Workplace at this point exhibits the issue that you mention: the header does not show properly.  There are errors in the console, and they point to the load handler for the Workplace Page Switcher view.  It looks like this view is expecting a configuration item to be set, which is not available with a custom Workplace instance.  I think this is a defect, and I will follow up on it internally.  To work around this issue, I followed the above steps to also bring in the Workplace page Switcher to my Process App.  I then changed the Inline Javascript in this view to override and wrap the load() lifecycle function as follows:
var fileName = 'Workplace-Control-WorkplacePageSwitcher.js';

var path = (dojoConfig.isDebug === true) ?

  com_ibm_bpm_coach.getManagedAssetUrl(fileName, com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false) :

  com_ibm_bpm_coach.getManagedAssetUrl('Workplace-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false);

              path = (dojoConfig.isDeveloperMode === true) ? "workplace/files/" + fileName : path;

var _this = this;

require({async:false},[path], function() {

workplace_control_InitWorkplacePageSwitcher.call(_this, utilities, taskUtils, wpResources, resourceUtils, domClass);

              var proto = Object.getPrototypeOf(_this);

              var oldLoad = proto.load;

              proto.load = function(){

                          this.context._workflowSaaSEndpointMap = {};

              this.context._workflowSaaSEndpointMap.workplace = "Your workplace URL";

                           oldLoad.apply(this, arguments);

              };

});

Now, when we run Workplace, it has the customizations that we were after with a working header:

One remaining issue in my scenario was that the copy link button beside IBM Workplace did not copy the full URL, likely because that view is stripping query parameters.  This could also be tweaked using the same approach.

Hope this helps,

Grant.

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Thank you very much again! I will try this out and keep you updated!

Greetings, 
Alex

Hi Alex,

Yes, I see that removing the stats controls seems to adversely affect other components.  You could override more controls, but I think the easiest solution is to just hide the statistics instead.  In my environment, I added the Task Statistics back and set the visibility:

To get rid of the header button, I also just hid the item with a little CSS in the Workplace Layout view:

Those two changes should address #1.

I had a look at #2, and again, you could override more components, but if you are just trying to hide content, I think CSS is the easiest route.  For views like these that do not have unique classes on them, I recommend using the "control-name" attribute from the element, as it should be consistent between sessions.  I added this to the same Inline CSS block:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard0/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard2/Description"]{ 	display:none; }

If you also want to make the tiles smaller, you can take a similar approach. I added these lines which seemed to do the trick:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1"]{ 	min-height:100px; }.Launch_list .SPARKPanel .workstreamCard .stat-panel{ 	min-height:100px; 	height:100px; } .Workflow_Card{ 	min-height:100px; }

The above resulted in the workflow launch screen looking like:

I'll have to get back on #3, as the change you made seems to be the right setting to me, but it doesn't work for me either.

Thanks,

Grant.

Hello Grant, 

Thank you very much for the help. I can verify that with your workaround I got the top header to display.

Unfortunately,  after removing the "Task Statistics" View from the "Workplace Layout" View, the "Workflows" Tab is not loading again with a similar error: "TypeError: Cannot read properties of undefined (reading 'instance')". Any additional idea what is going on? 

In total we are trying to achieve the following customizations:

1. Removing the "Task Statistics" View and the Statistik Toggle Button (Statistics_Icon) from the "Workplace Layout" View.
2. Removing the Description from the "Workflow Card" View. I saw that this is possible via modifying the "Workflow Card" View but after changing the necessary components the Workflows can no longer be launched as "Start" Button is disabled. 
3. Changing the Title of the Header Bar. In the "Workplace Layout" View there are 2 config options "titleLabel" and "brandLabel" but it seems that setting those does not change anything.

Thank you very much in advance for your help!

Greetings, 
Alex

Hi Alexander and Lakshya,

I played with this a bit, and I want to share the general methodology for customizing Workplace.  The Workplace you are interested in customizing is the CSHS incarnation, so you start by creating a copy of the top-level Workplace Process App.  If you use the URL in the overview of the Workplace CSHS, then you should get a fully functioning, exact copy of the original Workplace.  This is your starting point.  The top-level Workplace CSHS, as Dave points out, just points to a nested CSHS, which is in the Workplace toolkit.  You want to customize this aspect of the UI, so you expand the Workplace toolkit and choose to copy the item to your current Process App:

Next, you change the Workplace CSHS to point to the new nested CSHS that you just copied over (mine is called Workplace 2):

Important!!  Be sure to map variables and replicate any other setup from the original setting.  In my case, I noticed that the inputs and outputs were blanked out, so I had to remap them:

This pattern of copy, replace, reconfigure is common to all aspects of Workplace that you want to customize.  You mention that you wanted to remove the statistics at the top and replace them with instructions, so let's continue down that path.  Opening the copied "Workplace 2" nested CSHS, and looking at the canvas, we can see that the "Workplace Layout" is responsible for the stats area, but this View is read-only and in the Workplace toolkit.  So what do we do?  Copy, replace, reconfigure!!

After copying Workplace Layout into my new Process App, and pointing Workplace 2 to the copied View, we can now drill into this View and make customizations.  Note that the configuration of the View did NOT get erased in this case, so I just had to do a simple View replacement.  In the Workplace Layout, there is a "Task Statistics" view, and we can remove it:

And then add something else for the description (I used an HTML block):

Running Workplace at this point exhibits the issue that you mention: the header does not show properly.  There are errors in the console, and they point to the load handler for the Workplace Page Switcher view.  It looks like this view is expecting a configuration item to be set, which is not available with a custom Workplace instance.  I think this is a defect, and I will follow up on it internally.  To work around this issue, I followed the above steps to also bring in the Workplace page Switcher to my Process App.  I then changed the Inline Javascript in this view to override and wrap the load() lifecycle function as follows:
var fileName = 'Workplace-Control-WorkplacePageSwitcher.js';

var path = (dojoConfig.isDebug === true) ?

  com_ibm_bpm_coach.getManagedAssetUrl(fileName, com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false) :

  com_ibm_bpm_coach.getManagedAssetUrl('Workplace-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false);

              path = (dojoConfig.isDeveloperMode === true) ? "workplace/files/" + fileName : path;

var _this = this;

require({async:false},[path], function() {

workplace_control_InitWorkplacePageSwitcher.call(_this, utilities, taskUtils, wpResources, resourceUtils, domClass);

              var proto = Object.getPrototypeOf(_this);

              var oldLoad = proto.load;

              proto.load = function(){

                          this.context._workflowSaaSEndpointMap = {};

              this.context._workflowSaaSEndpointMap.workplace = "Your workplace URL";

                           oldLoad.apply(this, arguments);

              };

});

Now, when we run Workplace, it has the customizations that we were after with a working header:

One remaining issue in my scenario was that the copy link button beside IBM Workplace did not copy the full URL, likely because that view is stripping query parameters.  This could also be tweaked using the same approach.

Hope this helps,

Grant.

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hi Alex,

Yes, I see that removing the stats controls seems to adversely affect other components.  You could override more controls, but I think the easiest solution is to just hide the statistics instead.  In my environment, I added the Task Statistics back and set the visibility:

To get rid of the header button, I also just hid the item with a little CSS in the Workplace Layout view:

Those two changes should address #1.

I had a look at #2, and again, you could override more components, but if you are just trying to hide content, I think CSS is the easiest route.  For views like these that do not have unique classes on them, I recommend using the "control-name" attribute from the element, as it should be consistent between sessions.  I added this to the same Inline CSS block:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard0/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard2/Description"]{ 	display:none; }

If you also want to make the tiles smaller, you can take a similar approach. I added these lines which seemed to do the trick:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1"]{ 	min-height:100px; }.Launch_list .SPARKPanel .workstreamCard .stat-panel{ 	min-height:100px; 	height:100px; } .Workflow_Card{ 	min-height:100px; }

The above resulted in the workflow launch screen looking like:

I'll have to get back on #3, as the change you made seems to be the right setting to me, but it doesn't work for me either.

Thanks,

Grant.

Hello Grant, 

Thank you very much for the help. I can verify that with your workaround I got the top header to display.

Unfortunately,  after removing the "Task Statistics" View from the "Workplace Layout" View, the "Workflows" Tab is not loading again with a similar error: "TypeError: Cannot read properties of undefined (reading 'instance')". Any additional idea what is going on? 

In total we are trying to achieve the following customizations:

1. Removing the "Task Statistics" View and the Statistik Toggle Button (Statistics_Icon) from the "Workplace Layout" View.
2. Removing the Description from the "Workflow Card" View. I saw that this is possible via modifying the "Workflow Card" View but after changing the necessary components the Workflows can no longer be launched as "Start" Button is disabled. 
3. Changing the Title of the Header Bar. In the "Workplace Layout" View there are 2 config options "titleLabel" and "brandLabel" but it seems that setting those does not change anything.

Thank you very much in advance for your help!

Greetings, 
Alex

Hi Alexander and Lakshya,

I played with this a bit, and I want to share the general methodology for customizing Workplace.  The Workplace you are interested in customizing is the CSHS incarnation, so you start by creating a copy of the top-level Workplace Process App.  If you use the URL in the overview of the Workplace CSHS, then you should get a fully functioning, exact copy of the original Workplace.  This is your starting point.  The top-level Workplace CSHS, as Dave points out, just points to a nested CSHS, which is in the Workplace toolkit.  You want to customize this aspect of the UI, so you expand the Workplace toolkit and choose to copy the item to your current Process App:

Next, you change the Workplace CSHS to point to the new nested CSHS that you just copied over (mine is called Workplace 2):

Important!!  Be sure to map variables and replicate any other setup from the original setting.  In my case, I noticed that the inputs and outputs were blanked out, so I had to remap them:

This pattern of copy, replace, reconfigure is common to all aspects of Workplace that you want to customize.  You mention that you wanted to remove the statistics at the top and replace them with instructions, so let's continue down that path.  Opening the copied "Workplace 2" nested CSHS, and looking at the canvas, we can see that the "Workplace Layout" is responsible for the stats area, but this View is read-only and in the Workplace toolkit.  So what do we do?  Copy, replace, reconfigure!!

After copying Workplace Layout into my new Process App, and pointing Workplace 2 to the copied View, we can now drill into this View and make customizations.  Note that the configuration of the View did NOT get erased in this case, so I just had to do a simple View replacement.  In the Workplace Layout, there is a "Task Statistics" view, and we can remove it:

And then add something else for the description (I used an HTML block):

Running Workplace at this point exhibits the issue that you mention: the header does not show properly.  There are errors in the console, and they point to the load handler for the Workplace Page Switcher view.  It looks like this view is expecting a configuration item to be set, which is not available with a custom Workplace instance.  I think this is a defect, and I will follow up on it internally.  To work around this issue, I followed the above steps to also bring in the Workplace page Switcher to my Process App.  I then changed the Inline Javascript in this view to override and wrap the load() lifecycle function as follows:
var fileName = 'Workplace-Control-WorkplacePageSwitcher.js';

var path = (dojoConfig.isDebug === true) ?

  com_ibm_bpm_coach.getManagedAssetUrl(fileName, com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false) :

  com_ibm_bpm_coach.getManagedAssetUrl('Workplace-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false);

              path = (dojoConfig.isDeveloperMode === true) ? "workplace/files/" + fileName : path;

var _this = this;

require({async:false},[path], function() {

workplace_control_InitWorkplacePageSwitcher.call(_this, utilities, taskUtils, wpResources, resourceUtils, domClass);

              var proto = Object.getPrototypeOf(_this);

              var oldLoad = proto.load;

              proto.load = function(){

                          this.context._workflowSaaSEndpointMap = {};

              this.context._workflowSaaSEndpointMap.workplace = "Your workplace URL";

                           oldLoad.apply(this, arguments);

              };

});

Now, when we run Workplace, it has the customizations that we were after with a working header:

One remaining issue in my scenario was that the copy link button beside IBM Workplace did not copy the full URL, likely because that view is stripping query parameters.  This could also be tweaked using the same approach.

Hope this helps,

Grant.

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hi Grant,

how is it possible to remove completely the statistics controls, hiding the panel doesn't remove the not required HTTP request.

To remove the additional controls as you mentioned is documented ?

Thanks for help

Hi Alex,

Yes, I see that removing the stats controls seems to adversely affect other components.  You could override more controls, but I think the easiest solution is to just hide the statistics instead.  In my environment, I added the Task Statistics back and set the visibility:

To get rid of the header button, I also just hid the item with a little CSS in the Workplace Layout view:

Those two changes should address #1.

I had a look at #2, and again, you could override more components, but if you are just trying to hide content, I think CSS is the easiest route.  For views like these that do not have unique classes on them, I recommend using the "control-name" attribute from the element, as it should be consistent between sessions.  I added this to the same Inline CSS block:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard0/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard2/Description"]{ 	display:none; }

If you also want to make the tiles smaller, you can take a similar approach. I added these lines which seemed to do the trick:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1"]{ 	min-height:100px; }.Launch_list .SPARKPanel .workstreamCard .stat-panel{ 	min-height:100px; 	height:100px; } .Workflow_Card{ 	min-height:100px; }

The above resulted in the workflow launch screen looking like:

I'll have to get back on #3, as the change you made seems to be the right setting to me, but it doesn't work for me either.

Thanks,

Grant.

Hello Grant, 

Thank you very much for the help. I can verify that with your workaround I got the top header to display.

Unfortunately,  after removing the "Task Statistics" View from the "Workplace Layout" View, the "Workflows" Tab is not loading again with a similar error: "TypeError: Cannot read properties of undefined (reading 'instance')". Any additional idea what is going on? 

In total we are trying to achieve the following customizations:

1. Removing the "Task Statistics" View and the Statistik Toggle Button (Statistics_Icon) from the "Workplace Layout" View.
2. Removing the Description from the "Workflow Card" View. I saw that this is possible via modifying the "Workflow Card" View but after changing the necessary components the Workflows can no longer be launched as "Start" Button is disabled. 
3. Changing the Title of the Header Bar. In the "Workplace Layout" View there are 2 config options "titleLabel" and "brandLabel" but it seems that setting those does not change anything.

Thank you very much in advance for your help!

Greetings, 
Alex

Hi Alexander and Lakshya,

I played with this a bit, and I want to share the general methodology for customizing Workplace.  The Workplace you are interested in customizing is the CSHS incarnation, so you start by creating a copy of the top-level Workplace Process App.  If you use the URL in the overview of the Workplace CSHS, then you should get a fully functioning, exact copy of the original Workplace.  This is your starting point.  The top-level Workplace CSHS, as Dave points out, just points to a nested CSHS, which is in the Workplace toolkit.  You want to customize this aspect of the UI, so you expand the Workplace toolkit and choose to copy the item to your current Process App:

Next, you change the Workplace CSHS to point to the new nested CSHS that you just copied over (mine is called Workplace 2):

Important!!  Be sure to map variables and replicate any other setup from the original setting.  In my case, I noticed that the inputs and outputs were blanked out, so I had to remap them:

This pattern of copy, replace, reconfigure is common to all aspects of Workplace that you want to customize.  You mention that you wanted to remove the statistics at the top and replace them with instructions, so let's continue down that path.  Opening the copied "Workplace 2" nested CSHS, and looking at the canvas, we can see that the "Workplace Layout" is responsible for the stats area, but this View is read-only and in the Workplace toolkit.  So what do we do?  Copy, replace, reconfigure!!

After copying Workplace Layout into my new Process App, and pointing Workplace 2 to the copied View, we can now drill into this View and make customizations.  Note that the configuration of the View did NOT get erased in this case, so I just had to do a simple View replacement.  In the Workplace Layout, there is a "Task Statistics" view, and we can remove it:

And then add something else for the description (I used an HTML block):

Running Workplace at this point exhibits the issue that you mention: the header does not show properly.  There are errors in the console, and they point to the load handler for the Workplace Page Switcher view.  It looks like this view is expecting a configuration item to be set, which is not available with a custom Workplace instance.  I think this is a defect, and I will follow up on it internally.  To work around this issue, I followed the above steps to also bring in the Workplace page Switcher to my Process App.  I then changed the Inline Javascript in this view to override and wrap the load() lifecycle function as follows:
var fileName = 'Workplace-Control-WorkplacePageSwitcher.js';

var path = (dojoConfig.isDebug === true) ?

  com_ibm_bpm_coach.getManagedAssetUrl(fileName, com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false) :

  com_ibm_bpm_coach.getManagedAssetUrl('Workplace-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false);

              path = (dojoConfig.isDeveloperMode === true) ? "workplace/files/" + fileName : path;

var _this = this;

require({async:false},[path], function() {

workplace_control_InitWorkplacePageSwitcher.call(_this, utilities, taskUtils, wpResources, resourceUtils, domClass);

              var proto = Object.getPrototypeOf(_this);

              var oldLoad = proto.load;

              proto.load = function(){

                          this.context._workflowSaaSEndpointMap = {};

              this.context._workflowSaaSEndpointMap.workplace = "Your workplace URL";

                           oldLoad.apply(this, arguments);

              };

});

Now, when we run Workplace, it has the customizations that we were after with a working header:

One remaining issue in my scenario was that the copy link button beside IBM Workplace did not copy the full URL, likely because that view is stripping query parameters.  This could also be tweaked using the same approach.

Hope this helps,

Grant.

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hi Yannick,

The Workplace toolkit is provided as a set of reusable controls to implement your own Workplace equivalent.  See the documentation here: https://www.ibm.com/docs/en/baw/25.0.x?topic=toolkits-workplace-toolkit.  There is no documentation about copying the existing Workplace and making such changes.  You can use the controls in any way you like to achieve what you are after.  In this thread, I'm offering some ideas that are easiest to implement, but may have drawbacks, as you mention.  As you say, simply hiding the control may still result in XHR calls going back to the server, DOM elements being constructed, JS code running, etc.  If you want performance benefits by removing the control, then you'd probably have to do a bit more work, such as overriding the JS implementation code for some of the views.  It appears that there are some unexpected interdependencies between view instances, so you'd have to address those on the JS side.

Hi Grant,

how is it possible to remove completely the statistics controls, hiding the panel doesn't remove the not required HTTP request.

To remove the additional controls as you mentioned is documented ?

Thanks for help

Hi Alex,

Yes, I see that removing the stats controls seems to adversely affect other components.  You could override more controls, but I think the easiest solution is to just hide the statistics instead.  In my environment, I added the Task Statistics back and set the visibility:

To get rid of the header button, I also just hid the item with a little CSS in the Workplace Layout view:

Those two changes should address #1.

I had a look at #2, and again, you could override more components, but if you are just trying to hide content, I think CSS is the easiest route.  For views like these that do not have unique classes on them, I recommend using the "control-name" attribute from the element, as it should be consistent between sessions.  I added this to the same Inline CSS block:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard0/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard2/Description"]{ 	display:none; }

If you also want to make the tiles smaller, you can take a similar approach. I added these lines which seemed to do the trick:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1"]{ 	min-height:100px; }.Launch_list .SPARKPanel .workstreamCard .stat-panel{ 	min-height:100px; 	height:100px; } .Workflow_Card{ 	min-height:100px; }

The above resulted in the workflow launch screen looking like:

I'll have to get back on #3, as the change you made seems to be the right setting to me, but it doesn't work for me either.

Thanks,

Grant.

Hello Grant, 

Thank you very much for the help. I can verify that with your workaround I got the top header to display.

Unfortunately,  after removing the "Task Statistics" View from the "Workplace Layout" View, the "Workflows" Tab is not loading again with a similar error: "TypeError: Cannot read properties of undefined (reading 'instance')". Any additional idea what is going on? 

In total we are trying to achieve the following customizations:

1. Removing the "Task Statistics" View and the Statistik Toggle Button (Statistics_Icon) from the "Workplace Layout" View.
2. Removing the Description from the "Workflow Card" View. I saw that this is possible via modifying the "Workflow Card" View but after changing the necessary components the Workflows can no longer be launched as "Start" Button is disabled. 
3. Changing the Title of the Header Bar. In the "Workplace Layout" View there are 2 config options "titleLabel" and "brandLabel" but it seems that setting those does not change anything.

Thank you very much in advance for your help!

Greetings, 
Alex

Hi Alexander and Lakshya,

I played with this a bit, and I want to share the general methodology for customizing Workplace.  The Workplace you are interested in customizing is the CSHS incarnation, so you start by creating a copy of the top-level Workplace Process App.  If you use the URL in the overview of the Workplace CSHS, then you should get a fully functioning, exact copy of the original Workplace.  This is your starting point.  The top-level Workplace CSHS, as Dave points out, just points to a nested CSHS, which is in the Workplace toolkit.  You want to customize this aspect of the UI, so you expand the Workplace toolkit and choose to copy the item to your current Process App:

Next, you change the Workplace CSHS to point to the new nested CSHS that you just copied over (mine is called Workplace 2):

Important!!  Be sure to map variables and replicate any other setup from the original setting.  In my case, I noticed that the inputs and outputs were blanked out, so I had to remap them:

This pattern of copy, replace, reconfigure is common to all aspects of Workplace that you want to customize.  You mention that you wanted to remove the statistics at the top and replace them with instructions, so let's continue down that path.  Opening the copied "Workplace 2" nested CSHS, and looking at the canvas, we can see that the "Workplace Layout" is responsible for the stats area, but this View is read-only and in the Workplace toolkit.  So what do we do?  Copy, replace, reconfigure!!

After copying Workplace Layout into my new Process App, and pointing Workplace 2 to the copied View, we can now drill into this View and make customizations.  Note that the configuration of the View did NOT get erased in this case, so I just had to do a simple View replacement.  In the Workplace Layout, there is a "Task Statistics" view, and we can remove it:

And then add something else for the description (I used an HTML block):

Running Workplace at this point exhibits the issue that you mention: the header does not show properly.  There are errors in the console, and they point to the load handler for the Workplace Page Switcher view.  It looks like this view is expecting a configuration item to be set, which is not available with a custom Workplace instance.  I think this is a defect, and I will follow up on it internally.  To work around this issue, I followed the above steps to also bring in the Workplace page Switcher to my Process App.  I then changed the Inline Javascript in this view to override and wrap the load() lifecycle function as follows:
var fileName = 'Workplace-Control-WorkplacePageSwitcher.js';

var path = (dojoConfig.isDebug === true) ?

  com_ibm_bpm_coach.getManagedAssetUrl(fileName, com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false) :

  com_ibm_bpm_coach.getManagedAssetUrl('Workplace-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false);

              path = (dojoConfig.isDeveloperMode === true) ? "workplace/files/" + fileName : path;

var _this = this;

require({async:false},[path], function() {

workplace_control_InitWorkplacePageSwitcher.call(_this, utilities, taskUtils, wpResources, resourceUtils, domClass);

              var proto = Object.getPrototypeOf(_this);

              var oldLoad = proto.load;

              proto.load = function(){

                          this.context._workflowSaaSEndpointMap = {};

              this.context._workflowSaaSEndpointMap.workplace = "Your workplace URL";

                           oldLoad.apply(this, arguments);

              };

});

Now, when we run Workplace, it has the customizations that we were after with a working header:

One remaining issue in my scenario was that the copy link button beside IBM Workplace did not copy the full URL, likely because that view is stripping query parameters.  This could also be tweaked using the same approach.

Hope this helps,

Grant.

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks 

Hey Grant, 
Thank you very much for all of your help. We will think about opening an Idea for further IBM supported Workplace Customisation. In the mean time this has helped us very much.
Greetings, 
Alex

Hi Yannick,

The Workplace toolkit is provided as a set of reusable controls to implement your own Workplace equivalent.  See the documentation here: https://www.ibm.com/docs/en/baw/25.0.x?topic=toolkits-workplace-toolkit.  There is no documentation about copying the existing Workplace and making such changes.  You can use the controls in any way you like to achieve what you are after.  In this thread, I'm offering some ideas that are easiest to implement, but may have drawbacks, as you mention.  As you say, simply hiding the control may still result in XHR calls going back to the server, DOM elements being constructed, JS code running, etc.  If you want performance benefits by removing the control, then you'd probably have to do a bit more work, such as overriding the JS implementation code for some of the views.  It appears that there are some unexpected interdependencies between view instances, so you'd have to address those on the JS side.

Hi Grant,

how is it possible to remove completely the statistics controls, hiding the panel doesn't remove the not required HTTP request.

To remove the additional controls as you mentioned is documented ?

Thanks for help

Hi Alex,

Yes, I see that removing the stats controls seems to adversely affect other components.  You could override more controls, but I think the easiest solution is to just hide the statistics instead.  In my environment, I added the Task Statistics back and set the visibility:

To get rid of the header button, I also just hid the item with a little CSS in the Workplace Layout view:

Those two changes should address #1.

I had a look at #2, and again, you could override more components, but if you are just trying to hide content, I think CSS is the easiest route.  For views like these that do not have unique classes on them, I recommend using the "control-name" attribute from the element, as it should be consistent between sessions.  I added this to the same Inline CSS block:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard0/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1/Description"]{ 	display:none; }  div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard2/Description"]{ 	display:none; }

If you also want to make the tiles smaller, you can take a similar approach. I added these lines which seemed to do the trick:

 div[control-name="/Workplace_Content_Wrapper1/Workplace_Layout1/Properties_modal1/Launch_list/WorkflowCard1"]{ 	min-height:100px; }.Launch_list .SPARKPanel .workstreamCard .stat-panel{ 	min-height:100px; 	height:100px; } .Workflow_Card{ 	min-height:100px; }

The above resulted in the workflow launch screen looking like:

I'll have to get back on #3, as the change you made seems to be the right setting to me, but it doesn't work for me either.

Thanks,

Grant.

Hello Grant, 

Thank you very much for the help. I can verify that with your workaround I got the top header to display.

Unfortunately,  after removing the "Task Statistics" View from the "Workplace Layout" View, the "Workflows" Tab is not loading again with a similar error: "TypeError: Cannot read properties of undefined (reading 'instance')". Any additional idea what is going on? 

In total we are trying to achieve the following customizations:

1. Removing the "Task Statistics" View and the Statistik Toggle Button (Statistics_Icon) from the "Workplace Layout" View.
2. Removing the Description from the "Workflow Card" View. I saw that this is possible via modifying the "Workflow Card" View but after changing the necessary components the Workflows can no longer be launched as "Start" Button is disabled. 
3. Changing the Title of the Header Bar. In the "Workplace Layout" View there are 2 config options "titleLabel" and "brandLabel" but it seems that setting those does not change anything.

Thank you very much in advance for your help!

Greetings, 
Alex

Hi Alexander and Lakshya,

I played with this a bit, and I want to share the general methodology for customizing Workplace.  The Workplace you are interested in customizing is the CSHS incarnation, so you start by creating a copy of the top-level Workplace Process App.  If you use the URL in the overview of the Workplace CSHS, then you should get a fully functioning, exact copy of the original Workplace.  This is your starting point.  The top-level Workplace CSHS, as Dave points out, just points to a nested CSHS, which is in the Workplace toolkit.  You want to customize this aspect of the UI, so you expand the Workplace toolkit and choose to copy the item to your current Process App:

Next, you change the Workplace CSHS to point to the new nested CSHS that you just copied over (mine is called Workplace 2):

Important!!  Be sure to map variables and replicate any other setup from the original setting.  In my case, I noticed that the inputs and outputs were blanked out, so I had to remap them:

This pattern of copy, replace, reconfigure is common to all aspects of Workplace that you want to customize.  You mention that you wanted to remove the statistics at the top and replace them with instructions, so let's continue down that path.  Opening the copied "Workplace 2" nested CSHS, and looking at the canvas, we can see that the "Workplace Layout" is responsible for the stats area, but this View is read-only and in the Workplace toolkit.  So what do we do?  Copy, replace, reconfigure!!

After copying Workplace Layout into my new Process App, and pointing Workplace 2 to the copied View, we can now drill into this View and make customizations.  Note that the configuration of the View did NOT get erased in this case, so I just had to do a simple View replacement.  In the Workplace Layout, there is a "Task Statistics" view, and we can remove it:

And then add something else for the description (I used an HTML block):

Running Workplace at this point exhibits the issue that you mention: the header does not show properly.  There are errors in the console, and they point to the load handler for the Workplace Page Switcher view.  It looks like this view is expecting a configuration item to be set, which is not available with a custom Workplace instance.  I think this is a defect, and I will follow up on it internally.  To work around this issue, I followed the above steps to also bring in the Workplace page Switcher to my Process App.  I then changed the Inline Javascript in this view to override and wrap the load() lifecycle function as follows:
var fileName = 'Workplace-Control-WorkplacePageSwitcher.js';

var path = (dojoConfig.isDebug === true) ?

  com_ibm_bpm_coach.getManagedAssetUrl(fileName, com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false) :

  com_ibm_bpm_coach.getManagedAssetUrl('Workplace-Controls.min.js', com_ibm_bpm_coach.assetType_WEB, 'SYSWPT', false);

              path = (dojoConfig.isDeveloperMode === true) ? "workplace/files/" + fileName : path;

var _this = this;

require({async:false},[path], function() {

workplace_control_InitWorkplacePageSwitcher.call(_this, utilities, taskUtils, wpResources, resourceUtils, domClass);

              var proto = Object.getPrototypeOf(_this);

              var oldLoad = proto.load;

              proto.load = function(){

                          this.context._workflowSaaSEndpointMap = {};

              this.context._workflowSaaSEndpointMap.workplace = "Your workplace URL";

                           oldLoad.apply(this, arguments);

              };

});

Now, when we run Workplace, it has the customizations that we were after with a working header:

One remaining issue in my scenario was that the copy link button beside IBM Workplace did not copy the full URL, likely because that view is stripping query parameters.  This could also be tweaked using the same approach.

Hope this helps,

Grant.

The error I am receiving in the console is: "TypeError: Cannot read properties of undefined (reading 'workplace')" in the "Workplace-Controls.min.js:1546:126" file.

Hey Dave, 
Thank you for the information. For me (WfPS 24.0.1) the following is happening after executing the following steps:

1. Creating a new Process App "Custom Workplace"
2. Copying the Workplace CSHS from the Workplace Process App to the new Process App
3. Copying the nested CSHS from the Workplace Toolkit into the new Process App
4. Mapping the copied nested CSHS in the copied Workplace CSHS in the new Process App
5. Running the Workplace CSHS results in a Workplace where the top navigation bar (the black bar where it says "IBM Workplace" with the user settings on the right corner) is missing. This is not the case when switching over to the nested CSHS that is in the Workplace Toolkit.

Could you point me in the direction how to do this properly? Thank you very much!

Greetings,

Hello.

There is a basic shell Workplace Process App that has a single CSHS that has a nested CSHS from the Workplace Toolkit.

The nested CSHS is basically the top-level of the Workplace UI and contains all the sub views that provide all the content. You could override this top level CSHS with your own copy and point the main Workplace App at it.

From there, you could make your own customization changes to the top level layout which would still allow you to pick up any enhancements/fixes in future Workplace Toolkits (other than on the top level CSHS itself which you now "own").

Greetings,

We have recently exposed IBM Workplace(part of IBM BAW On-prem) to a limited group of users. There are few things which end users want to change for example they don't want to see the "Statistics Pane" instead they want to display some guidance. Can someone suggest what is best way to make those changes ? I believe all of the Workplace functionalities are present in the Workplace toolkit which is ready-only. It is very likely that customer might come up with these kind of changes on the UI in Workplace so we want to build some sort of generic approach to handle those

Thanks