PureEngage On-Premises

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window


#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees
------------------------------

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Hi Jerome,

I had arleady tried this, for some reason its not working.I am uploading the sample project

There is no error but icon is not appearing. 

Code can be downloaded ehre. 
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar

Google Docs		remove preview
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar View this on Google Docs >

REgards

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Original Message:
Sent: 09-28-2019 02:53
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Hello,

As you are using the sample (which refers to a custom media type named "customworkitem"), I assume:
* You have created a new Media Type (In Business Attributes\Media Type\Attribute Values) for "customworkitem"
* You have added customworkitem in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = customworkitem, ...

2 things to mention on the sample:
* In order to load that module, the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config file refers to a task/permission named "InteractionWorkspace.CustomWorkItemSample.canUse"
As you may not have defined that custom permission in your system, I would sugget to change that to InteractionWorkspace.WorkItem.canUse during your tests (assuming you have assigned that permission/role to your agent) or even InteractionWorkspace.Voice.canUse (to make sure plugin will load as your agent is probably enabled for voice as well).

* The sample shows 2 ways to define/override the Media/Interaction icons:
- Using the method used in new themes, via Scalar image/VectorIcon
- Using the method from former/legacy themes, via a png

The scalar approach is used in Resources/CustomWorkItemResourcesDefinition85.xml (and the Resources/Theme/CustomWorkItemResourcesDictionary.xaml) using ResourceKey attribute approach.
- In Resources/CustomWorkItemResourcesDefinition85.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ResourceKey="Media.CustomWorkItem" />
The ResourceKey references Media.CustomWorkItem.
- In Resources/Theme/CustomWorkItemResourcesDictionary.xaml:
Media.CustomWorkItem is defined as a VectorIcon with its scalar data/image.
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

The png approach is used in Resources/CustomWorkItemResourcesDefinition.xml (using ImageUrl attribute approach).
- In Resources/CustomWorkItemResourcesDefinition.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/CustomWorkItem.png" />

If you check the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config, you will see that CustomWorkItemResourcesDefinition85.xml is used/associated with the Default Theme (<theme name="Default" >)

So if you have started WDE and you are using Theme - Default, it means the configuration applying is the one CustomWorkItemResourcesDefinition85.xml.
If you want to change the icon, it is done in CustomWorkItemResourcesDictionary.xaml as vector image/data.

If you change theme to Blue/Royale/Fancy, CustomWorkItemResourcesDefinition.xml will then be used - and the png images are then the ones stored in Images folder.

You can also copy/override the <Value....> you want with ImageUrl directly in CustomWorkItemResourceDefinition85.xml (for the Default Them)

You can also find details about Image sizes in new theme, and converting image to vector here: https://docs.genesys.com/Documentation/IW/latest/Developer/MigrateYourCustomApplication#scrollNav-3

As you mentioned instagram media type in your original question, I assume it is clear that in that case:
- You would create a new Media Type (In Business Attributes\Media Type\Attribute Values) for "instagram"
- You would add instagram in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = instagram, ...
- In the WDE plugin, you would use:
<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ..... />

Hope this helps clarifying.

------------------------------
Jerome St Marc
Genesys - Employees
------------------------------

Original Message:
Sent: 09-30-2019 06:18
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi Jerome,

I had arleady tried this, for some reason its not working.I am uploading the sample project

There is no error but icon is not appearing.

Code can be downloaded ehre.
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar

Google Docs		remove preview
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar View this on Google Docs >

REgards

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 09-28-2019 02:53
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

As an additional comment, your compiled project is also missing the Resources/Theme/CustomWorkItemResourcesDictionary.xaml file.
You need to copy this file. It is where the scaval image/vector icon for customworkitem is defined in case of Default Theme.

------------------------------
Jerome St Marc
Genesys - Employees
------------------------------

Original Message:
Sent: 10-01-2019 11:12
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

As you are using the sample (which refers to a custom media type named "customworkitem"), I assume:
* You have created a new Media Type (In Business Attributes\Media Type\Attribute Values) for "customworkitem"
* You have added customworkitem in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = customworkitem, ...

2 things to mention on the sample:
* In order to load that module, the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config file refers to a task/permission named "InteractionWorkspace.CustomWorkItemSample.canUse"
As you may not have defined that custom permission in your system, I would sugget to change that to InteractionWorkspace.WorkItem.canUse during your tests (assuming you have assigned that permission/role to your agent) or even InteractionWorkspace.Voice.canUse (to make sure plugin will load as your agent is probably enabled for voice as well).

* The sample shows 2 ways to define/override the Media/Interaction icons:
- Using the method used in new themes, via Scalar image/VectorIcon
- Using the method from former/legacy themes, via a png

The scalar approach is used in Resources/CustomWorkItemResourcesDefinition85.xml (and the Resources/Theme/CustomWorkItemResourcesDictionary.xaml) using ResourceKey attribute approach.
- In Resources/CustomWorkItemResourcesDefinition85.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ResourceKey="Media.CustomWorkItem" />
The ResourceKey references Media.CustomWorkItem.
- In Resources/Theme/CustomWorkItemResourcesDictionary.xaml:
Media.CustomWorkItem is defined as a VectorIcon with its scalar data/image.
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

The png approach is used in Resources/CustomWorkItemResourcesDefinition.xml (using ImageUrl attribute approach).
- In Resources/CustomWorkItemResourcesDefinition.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/CustomWorkItem.png" />

If you check the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config, you will see that CustomWorkItemResourcesDefinition85.xml is used/associated with the Default Theme (<theme name="Default" >)

So if you have started WDE and you are using Theme - Default, it means the configuration applying is the one CustomWorkItemResourcesDefinition85.xml.
If you want to change the icon, it is done in CustomWorkItemResourcesDictionary.xaml as vector image/data.

If you change theme to Blue/Royale/Fancy, CustomWorkItemResourcesDefinition.xml will then be used - and the png images are then the ones stored in Images folder.

You can also copy/override the <Value....> you want with ImageUrl directly in CustomWorkItemResourceDefinition85.xml (for the Default Them)

You can also find details about Image sizes in new theme, and converting image to vector here: https://docs.genesys.com/Documentation/IW/latest/Developer/MigrateYourCustomApplication#scrollNav-3

As you mentioned instagram media type in your original question, I assume it is clear that in that case:
- You would create a new Media Type (In Business Attributes\Media Type\Attribute Values) for "instagram"
- You would add instagram in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = instagram, ...
- In the WDE plugin, you would use:
<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ..... />

Hope this helps clarifying.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-30-2019 06:18
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi Jerome,

I had arleady tried this, for some reason its not working.I am uploading the sample project

There is no error but icon is not appearing.

Code can be downloaded ehre.
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar

Google Docs		remove preview
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar View this on Google Docs >

REgards

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 09-28-2019 02:53
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

The changes have been made as instructed but its has been observed that images are still not visible but colors can be controlled by changing value in file CustomWorkItemResourcesDictionary.xaml.

how ever images are placed as provided in sample code.

https://drive.google.com/file/d/1Ir_8t0oruUtb7xgPcunhjfzGI_HiQh0y/view?usp=sharing

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Original Message:
Sent: 10-01-2019 11:16
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

As an additional comment, your compiled project is also missing the Resources/Theme/CustomWorkItemResourcesDictionary.xaml file.
You need to copy this file. It is where the scaval image/vector icon for customworkitem is defined in case of Default Theme.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-01-2019 11:12
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

As you are using the sample (which refers to a custom media type named "customworkitem"), I assume:
* You have created a new Media Type (In Business Attributes\Media Type\Attribute Values) for "customworkitem"
* You have added customworkitem in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = customworkitem, ...

2 things to mention on the sample:
* In order to load that module, the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config file refers to a task/permission named "InteractionWorkspace.CustomWorkItemSample.canUse"
As you may not have defined that custom permission in your system, I would sugget to change that to InteractionWorkspace.WorkItem.canUse during your tests (assuming you have assigned that permission/role to your agent) or even InteractionWorkspace.Voice.canUse (to make sure plugin will load as your agent is probably enabled for voice as well).

* The sample shows 2 ways to define/override the Media/Interaction icons:
- Using the method used in new themes, via Scalar image/VectorIcon
- Using the method from former/legacy themes, via a png

The scalar approach is used in Resources/CustomWorkItemResourcesDefinition85.xml (and the Resources/Theme/CustomWorkItemResourcesDictionary.xaml) using ResourceKey attribute approach.
- In Resources/CustomWorkItemResourcesDefinition85.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ResourceKey="Media.CustomWorkItem" />
The ResourceKey references Media.CustomWorkItem.
- In Resources/Theme/CustomWorkItemResourcesDictionary.xaml:
Media.CustomWorkItem is defined as a VectorIcon with its scalar data/image.
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

The png approach is used in Resources/CustomWorkItemResourcesDefinition.xml (using ImageUrl attribute approach).
- In Resources/CustomWorkItemResourcesDefinition.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/CustomWorkItem.png" />

If you check the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config, you will see that CustomWorkItemResourcesDefinition85.xml is used/associated with the Default Theme (<theme name="Default" >)

So if you have started WDE and you are using Theme - Default, it means the configuration applying is the one CustomWorkItemResourcesDefinition85.xml.
If you want to change the icon, it is done in CustomWorkItemResourcesDictionary.xaml as vector image/data.

If you change theme to Blue/Royale/Fancy, CustomWorkItemResourcesDefinition.xml will then be used - and the png images are then the ones stored in Images folder.

You can also copy/override the <Value....> you want with ImageUrl directly in CustomWorkItemResourceDefinition85.xml (for the Default Them)

You can also find details about Image sizes in new theme, and converting image to vector here: https://docs.genesys.com/Documentation/IW/latest/Developer/MigrateYourCustomApplication#scrollNav-3

As you mentioned instagram media type in your original question, I assume it is clear that in that case:
- You would create a new Media Type (In Business Attributes\Media Type\Attribute Values) for "instagram"
- You would add instagram in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = instagram, ...
- In the WDE plugin, you would use:
<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ..... />

Hope this helps clarifying.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-30-2019 06:18
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi Jerome,

I had arleady tried this, for some reason its not working.I am uploading the sample project

There is no error but icon is not appearing.

Code can be downloaded ehre.
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar

Google Docs		remove preview
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar View this on Google Docs >

REgards

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 09-28-2019 02:53
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Hello,

What theme have you selected in Workspace Desktop Edition? Default? Blue? Fancy? Royale?

As I explained in my previous reply, your .module-config file is configured to use CustomWorkItemResourcesDefinition85.xml when the Default theme is selected in WDE.
And it is configured to use CustomWorkItemResourcesDefinition.xml for the other ones (Blue/Royale/Fancy).

1) In CustomWorkItemResourcesDefinition85.xml, it is showing how to display an icon based on VectorIcon (SVG data).
You will see what is configured here if you are running WDE with Default Theme. If you want the second approach (from png), change the theme and restart WDE to see the other configuration method.

AVectorIconCustomWorkItem is defined (from which all icons will inherit style) - and that's where you have changed the color.
But the icon image itself is contained in other place.
For Media.CustomWorkItem, it is in the data property:
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

* Try to go on this site: https://www.rapidtables.com/web/tools/svg-viewer-editor.html
* Enter in Code: (I am copying the Data Value from above in an svg path):
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<path d="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z ""/>
</svg>
* Click on the magnifying glass button (this is to compute and to display the code)
You will see the image contained in that vectoricon data.

If you want to display a different image, using the SVG image approach, you will have to transform your own icon into this type of SVG path data and copy it in CustomWorkItemResourcesDictionary.xaml, instead of the previous Media.CustomWorkItem Data Value.
And you will do that for all other icon you want to change.

2) In CustomWorkItemResourcesDefinition.xml, it is showing how to display an icon based on png.
You will see what is configured here if you are running WDE with Blue, Fancy or Royale Theme.



------------------------------
Jerome St Marc
Genesys - Employees
------------------------------

Original Message:
Sent: 10-03-2019 13:55
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

The changes have been made as instructed but its has been observed that images are still not visible but colors can be controlled by changing value in file CustomWorkItemResourcesDictionary.xaml.

how ever images are placed as provided in sample code.

https://drive.google.com/file/d/1Ir_8t0oruUtb7xgPcunhjfzGI_HiQh0y/view?usp=sharing

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 10-01-2019 11:16
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

As an additional comment, your compiled project is also missing the Resources/Theme/CustomWorkItemResourcesDictionary.xaml file.
You need to copy this file. It is where the scaval image/vector icon for customworkitem is defined in case of Default Theme.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-01-2019 11:12
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

As you are using the sample (which refers to a custom media type named "customworkitem"), I assume:
* You have created a new Media Type (In Business Attributes\Media Type\Attribute Values) for "customworkitem"
* You have added customworkitem in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = customworkitem, ...

2 things to mention on the sample:
* In order to load that module, the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config file refers to a task/permission named "InteractionWorkspace.CustomWorkItemSample.canUse"
As you may not have defined that custom permission in your system, I would sugget to change that to InteractionWorkspace.WorkItem.canUse during your tests (assuming you have assigned that permission/role to your agent) or even InteractionWorkspace.Voice.canUse (to make sure plugin will load as your agent is probably enabled for voice as well).

* The sample shows 2 ways to define/override the Media/Interaction icons:
- Using the method used in new themes, via Scalar image/VectorIcon
- Using the method from former/legacy themes, via a png

The scalar approach is used in Resources/CustomWorkItemResourcesDefinition85.xml (and the Resources/Theme/CustomWorkItemResourcesDictionary.xaml) using ResourceKey attribute approach.
- In Resources/CustomWorkItemResourcesDefinition85.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ResourceKey="Media.CustomWorkItem" />
The ResourceKey references Media.CustomWorkItem.
- In Resources/Theme/CustomWorkItemResourcesDictionary.xaml:
Media.CustomWorkItem is defined as a VectorIcon with its scalar data/image.
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

The png approach is used in Resources/CustomWorkItemResourcesDefinition.xml (using ImageUrl attribute approach).
- In Resources/CustomWorkItemResourcesDefinition.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/CustomWorkItem.png" />

If you check the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config, you will see that CustomWorkItemResourcesDefinition85.xml is used/associated with the Default Theme (<theme name="Default" >)

So if you have started WDE and you are using Theme - Default, it means the configuration applying is the one CustomWorkItemResourcesDefinition85.xml.
If you want to change the icon, it is done in CustomWorkItemResourcesDictionary.xaml as vector image/data.

If you change theme to Blue/Royale/Fancy, CustomWorkItemResourcesDefinition.xml will then be used - and the png images are then the ones stored in Images folder.

You can also copy/override the <Value....> you want with ImageUrl directly in CustomWorkItemResourceDefinition85.xml (for the Default Them)

You can also find details about Image sizes in new theme, and converting image to vector here: https://docs.genesys.com/Documentation/IW/latest/Developer/MigrateYourCustomApplication#scrollNav-3

As you mentioned instagram media type in your original question, I assume it is clear that in that case:
- You would create a new Media Type (In Business Attributes\Media Type\Attribute Values) for "instagram"
- You would add instagram in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = instagram, ...
- In the WDE plugin, you would use:
<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ..... />

Hope this helps clarifying.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-30-2019 06:18
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi Jerome,

I had arleady tried this, for some reason its not working.I am uploading the sample project

There is no error but icon is not appearing.

Code can be downloaded ehre.
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar

Google Docs		remove preview
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar View this on Google Docs >

REgards

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 09-28-2019 02:53
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Hi Jerome, Really appreciate your help. 
Its seems I am just one step behind. 

As guided, images have been defined and called. png images are called instead of vector and are working perfectly fine on channels section and agent ready section.

however when interactions arrive, the icon is not visible on toaster as well as interaction bar.

are there any seperate keys for those two regions to be defined in resource directory ??

------------------------------
Maria El Adem
Computer Information Systems SAL
------------------------------

Original Message:
Sent: 10-03-2019 15:37
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

What theme have you selected in Workspace Desktop Edition? Default? Blue? Fancy? Royale?

As I explained in my previous reply, your .module-config file is configured to use CustomWorkItemResourcesDefinition85.xml when the Default theme is selected in WDE.
And it is configured to use CustomWorkItemResourcesDefinition.xml for the other ones (Blue/Royale/Fancy).

1) In CustomWorkItemResourcesDefinition85.xml, it is showing how to display an icon based on VectorIcon (SVG data).
You will see what is configured here if you are running WDE with Default Theme. If you want the second approach (from png), change the theme and restart WDE to see the other configuration method.

AVectorIconCustomWorkItem is defined (from which all icons will inherit style) - and that's where you have changed the color.
But the icon image itself is contained in other place.
For Media.CustomWorkItem, it is in the data property:
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

* Try to go on this site: https://www.rapidtables.com/web/tools/svg-viewer-editor.html
* Enter in Code: (I am copying the Data Value from above in an svg path):
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<path d="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z ""/>
</svg>
* Click on the magnifying glass button (this is to compute and to display the code)
You will see the image contained in that vectoricon data.

If you want to display a different image, using the SVG image approach, you will have to transform your own icon into this type of SVG path data and copy it in CustomWorkItemResourcesDictionary.xaml, instead of the previous Media.CustomWorkItem Data Value.
And you will do that for all other icon you want to change.

2) In CustomWorkItemResourcesDefinition.xml, it is showing how to display an icon based on png.
You will see what is configured here if you are running WDE with Blue, Fancy or Royale Theme.

<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/instagram.png" />
The format you have used for ImageUrl implies that the application will look for a resource part of the compiled application. And apparently that's not how you have declared your new images in your C# project. Check how existing image files are declared in the C# project sample (properties of the image in the sample - they are declared as Resource).

In your .csproj:

    <Resource Include="Images\MyButton.png" />

    <Resource Include="Images\CustomWorkItem.png" />

    <Resource Include="Images\CustomWorkItem.ico" />

    <Resource Include="Images\TransferCustomWorkItem.png" />

    <Resource Include="Images\MediaTypeCustomWorkItem.png" />

    <Resource Include="Images\CustomMoveToWorkbin.png" />

    <Content Include="Images\instagram.ico">

      <CopyToOutputDirectory>Always</CopyToOutputDirectory>

    </Content>

    <Content Include="Images\instagram.png">

      <CopyToOutputDirectory>Always</CopyToOutputDirectory>

    </Content>

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-03-2019 13:55
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

The changes have been made as instructed but its has been observed that images are still not visible but colors can be controlled by changing value in file CustomWorkItemResourcesDictionary.xaml.

how ever images are placed as provided in sample code.

https://drive.google.com/file/d/1Ir_8t0oruUtb7xgPcunhjfzGI_HiQh0y/view?usp=sharing

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 10-01-2019 11:16
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

As an additional comment, your compiled project is also missing the Resources/Theme/CustomWorkItemResourcesDictionary.xaml file.
You need to copy this file. It is where the scaval image/vector icon for customworkitem is defined in case of Default Theme.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-01-2019 11:12
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

As you are using the sample (which refers to a custom media type named "customworkitem"), I assume:
* You have created a new Media Type (In Business Attributes\Media Type\Attribute Values) for "customworkitem"
* You have added customworkitem in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = customworkitem, ...

2 things to mention on the sample:
* In order to load that module, the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config file refers to a task/permission named "InteractionWorkspace.CustomWorkItemSample.canUse"
As you may not have defined that custom permission in your system, I would sugget to change that to InteractionWorkspace.WorkItem.canUse during your tests (assuming you have assigned that permission/role to your agent) or even InteractionWorkspace.Voice.canUse (to make sure plugin will load as your agent is probably enabled for voice as well).

* The sample shows 2 ways to define/override the Media/Interaction icons:
- Using the method used in new themes, via Scalar image/VectorIcon
- Using the method from former/legacy themes, via a png

The scalar approach is used in Resources/CustomWorkItemResourcesDefinition85.xml (and the Resources/Theme/CustomWorkItemResourcesDictionary.xaml) using ResourceKey attribute approach.
- In Resources/CustomWorkItemResourcesDefinition85.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ResourceKey="Media.CustomWorkItem" />
The ResourceKey references Media.CustomWorkItem.
- In Resources/Theme/CustomWorkItemResourcesDictionary.xaml:
Media.CustomWorkItem is defined as a VectorIcon with its scalar data/image.
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

The png approach is used in Resources/CustomWorkItemResourcesDefinition.xml (using ImageUrl attribute approach).
- In Resources/CustomWorkItemResourcesDefinition.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/CustomWorkItem.png" />

If you check the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config, you will see that CustomWorkItemResourcesDefinition85.xml is used/associated with the Default Theme (<theme name="Default" >)

So if you have started WDE and you are using Theme - Default, it means the configuration applying is the one CustomWorkItemResourcesDefinition85.xml.
If you want to change the icon, it is done in CustomWorkItemResourcesDictionary.xaml as vector image/data.

If you change theme to Blue/Royale/Fancy, CustomWorkItemResourcesDefinition.xml will then be used - and the png images are then the ones stored in Images folder.

You can also copy/override the <Value....> you want with ImageUrl directly in CustomWorkItemResourceDefinition85.xml (for the Default Them)

You can also find details about Image sizes in new theme, and converting image to vector here: https://docs.genesys.com/Documentation/IW/latest/Developer/MigrateYourCustomApplication#scrollNav-3

As you mentioned instagram media type in your original question, I assume it is clear that in that case:
- You would create a new Media Type (In Business Attributes\Media Type\Attribute Values) for "instagram"
- You would add instagram in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = instagram, ...
- In the WDE plugin, you would use:
<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ..... />

Hope this helps clarifying.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-30-2019 06:18
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi Jerome,

I had arleady tried this, for some reason its not working.I am uploading the sample project

There is no error but icon is not appearing.

Code can be downloaded ehre.
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar

Google Docs		remove preview
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar View this on Google Docs >

REgards

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 09-28-2019 02:53
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Hello,

Yes, there are separate keys for different icons.

You can check the list in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction, for Interaction in Interaction history, ...
I think the following 3 should be changed at least:
For Media Channel Icon: Channel.OpenMedia.WorkItem.Image
For Interaction Icon: InteractionWorkItem.Image
For Interaction icon in the Interaction History: Contacts.ContactHistoryView.InteractionWorkItem

Regards,


------------------------------
Jerome St Marc
Genesys - Employees
------------------------------

Original Message:
Sent: 10-04-2019 10:56
From: Maria El Adem
Subject: WDE Customization - New Channel icon

Hi Jerome, Really appreciate your help.
Its seems I am just one step behind.

As guided, images have been defined and called. png images are called instead of vector and are working perfectly fine on channels section and agent ready section.

however when interactions arrive, the icon is not visible on toaster as well as interaction bar.

are there any seperate keys for those two regions to be defined in resource directory ??

------------------------------
Maria El Adem
Computer Information Systems SAL

Original Message:
Sent: 10-03-2019 15:37
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

What theme have you selected in Workspace Desktop Edition? Default? Blue? Fancy? Royale?

As I explained in my previous reply, your .module-config file is configured to use CustomWorkItemResourcesDefinition85.xml when the Default theme is selected in WDE.
And it is configured to use CustomWorkItemResourcesDefinition.xml for the other ones (Blue/Royale/Fancy).

1) In CustomWorkItemResourcesDefinition85.xml, it is showing how to display an icon based on VectorIcon (SVG data).
You will see what is configured here if you are running WDE with Default Theme. If you want the second approach (from png), change the theme and restart WDE to see the other configuration method.

AVectorIconCustomWorkItem is defined (from which all icons will inherit style) - and that's where you have changed the color.
But the icon image itself is contained in other place.
For Media.CustomWorkItem, it is in the data property:
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

* Try to go on this site: https://www.rapidtables.com/web/tools/svg-viewer-editor.html
* Enter in Code: (I am copying the Data Value from above in an svg path):
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<path d="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z ""/>
</svg>
* Click on the magnifying glass button (this is to compute and to display the code)
You will see the image contained in that vectoricon data.

If you want to display a different image, using the SVG image approach, you will have to transform your own icon into this type of SVG path data and copy it in CustomWorkItemResourcesDictionary.xaml, instead of the previous Media.CustomWorkItem Data Value.
And you will do that for all other icon you want to change.

2) In CustomWorkItemResourcesDefinition.xml, it is showing how to display an icon based on png.
You will see what is configured here if you are running WDE with Blue, Fancy or Royale Theme.

<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/instagram.png" />
The format you have used for ImageUrl implies that the application will look for a resource part of the compiled application. And apparently that's not how you have declared your new images in your C# project. Check how existing image files are declared in the C# project sample (properties of the image in the sample - they are declared as Resource).

In your .csproj:

    <Resource Include="Images\MyButton.png" />

    <Resource Include="Images\CustomWorkItem.png" />

    <Resource Include="Images\CustomWorkItem.ico" />

    <Resource Include="Images\TransferCustomWorkItem.png" />

    <Resource Include="Images\MediaTypeCustomWorkItem.png" />

    <Resource Include="Images\CustomMoveToWorkbin.png" />

    <Content Include="Images\instagram.ico">

      <CopyToOutputDirectory>Always</CopyToOutputDirectory>

    </Content>

    <Content Include="Images\instagram.png">

      <CopyToOutputDirectory>Always</CopyToOutputDirectory>

    </Content>

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-03-2019 13:55
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

The changes have been made as instructed but its has been observed that images are still not visible but colors can be controlled by changing value in file CustomWorkItemResourcesDictionary.xaml.

how ever images are placed as provided in sample code.

https://drive.google.com/file/d/1Ir_8t0oruUtb7xgPcunhjfzGI_HiQh0y/view?usp=sharing

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 10-01-2019 11:16
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

As an additional comment, your compiled project is also missing the Resources/Theme/CustomWorkItemResourcesDictionary.xaml file.
You need to copy this file. It is where the scaval image/vector icon for customworkitem is defined in case of Default Theme.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-01-2019 11:12
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

As you are using the sample (which refers to a custom media type named "customworkitem"), I assume:
* You have created a new Media Type (In Business Attributes\Media Type\Attribute Values) for "customworkitem"
* You have added customworkitem in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = customworkitem, ...

2 things to mention on the sample:
* In order to load that module, the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config file refers to a task/permission named "InteractionWorkspace.CustomWorkItemSample.canUse"
As you may not have defined that custom permission in your system, I would sugget to change that to InteractionWorkspace.WorkItem.canUse during your tests (assuming you have assigned that permission/role to your agent) or even InteractionWorkspace.Voice.canUse (to make sure plugin will load as your agent is probably enabled for voice as well).

* The sample shows 2 ways to define/override the Media/Interaction icons:
- Using the method used in new themes, via Scalar image/VectorIcon
- Using the method from former/legacy themes, via a png

The scalar approach is used in Resources/CustomWorkItemResourcesDefinition85.xml (and the Resources/Theme/CustomWorkItemResourcesDictionary.xaml) using ResourceKey attribute approach.
- In Resources/CustomWorkItemResourcesDefinition85.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ResourceKey="Media.CustomWorkItem" />
The ResourceKey references Media.CustomWorkItem.
- In Resources/Theme/CustomWorkItemResourcesDictionary.xaml:
Media.CustomWorkItem is defined as a VectorIcon with its scalar data/image.
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

The png approach is used in Resources/CustomWorkItemResourcesDefinition.xml (using ImageUrl attribute approach).
- In Resources/CustomWorkItemResourcesDefinition.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/CustomWorkItem.png" />

If you check the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config, you will see that CustomWorkItemResourcesDefinition85.xml is used/associated with the Default Theme (<theme name="Default" >)

So if you have started WDE and you are using Theme - Default, it means the configuration applying is the one CustomWorkItemResourcesDefinition85.xml.
If you want to change the icon, it is done in CustomWorkItemResourcesDictionary.xaml as vector image/data.

If you change theme to Blue/Royale/Fancy, CustomWorkItemResourcesDefinition.xml will then be used - and the png images are then the ones stored in Images folder.

You can also copy/override the <Value....> you want with ImageUrl directly in CustomWorkItemResourceDefinition85.xml (for the Default Them)

You can also find details about Image sizes in new theme, and converting image to vector here: https://docs.genesys.com/Documentation/IW/latest/Developer/MigrateYourCustomApplication#scrollNav-3

As you mentioned instagram media type in your original question, I assume it is clear that in that case:
- You would create a new Media Type (In Business Attributes\Media Type\Attribute Values) for "instagram"
- You would add instagram in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = instagram, ...
- In the WDE plugin, you would use:
<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ..... />

Hope this helps clarifying.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-30-2019 06:18
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi Jerome,

I had arleady tried this, for some reason its not working.I am uploading the sample project

There is no error but icon is not appearing.

Code can be downloaded ehre.
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar

Google Docs		remove preview
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar View this on Google Docs >

REgards

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 09-28-2019 02:53
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Thanks man! I can see the icons now. Really appreciate your help.

Regards
Hassan

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------

Original Message:
Sent: 10-06-2019 02:04
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

Yes, there are separate keys for different icons.

You can check the list in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction, for Interaction in Interaction history, ...
I think the following 3 should be changed at least:
For Media Channel Icon: Channel.OpenMedia.WorkItem.Image
For Interaction Icon: InteractionWorkItem.Image
For Interaction icon in the Interaction History: Contacts.ContactHistoryView.InteractionWorkItem

Regards,


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-04-2019 10:56
From: Maria El Adem
Subject: WDE Customization - New Channel icon

Hi Jerome, Really appreciate your help.
Its seems I am just one step behind.

As guided, images have been defined and called. png images are called instead of vector and are working perfectly fine on channels section and agent ready section.

however when interactions arrive, the icon is not visible on toaster as well as interaction bar.

are there any seperate keys for those two regions to be defined in resource directory ??

------------------------------
Maria El Adem
Computer Information Systems SAL

Original Message:
Sent: 10-03-2019 15:37
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

What theme have you selected in Workspace Desktop Edition? Default? Blue? Fancy? Royale?

As I explained in my previous reply, your .module-config file is configured to use CustomWorkItemResourcesDefinition85.xml when the Default theme is selected in WDE.
And it is configured to use CustomWorkItemResourcesDefinition.xml for the other ones (Blue/Royale/Fancy).

1) In CustomWorkItemResourcesDefinition85.xml, it is showing how to display an icon based on VectorIcon (SVG data).
You will see what is configured here if you are running WDE with Default Theme. If you want the second approach (from png), change the theme and restart WDE to see the other configuration method.

AVectorIconCustomWorkItem is defined (from which all icons will inherit style) - and that's where you have changed the color.
But the icon image itself is contained in other place.
For Media.CustomWorkItem, it is in the data property:
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

* Try to go on this site: https://www.rapidtables.com/web/tools/svg-viewer-editor.html
* Enter in Code: (I am copying the Data Value from above in an svg path):
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<path d="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z ""/>
</svg>
* Click on the magnifying glass button (this is to compute and to display the code)
You will see the image contained in that vectoricon data.

If you want to display a different image, using the SVG image approach, you will have to transform your own icon into this type of SVG path data and copy it in CustomWorkItemResourcesDictionary.xaml, instead of the previous Media.CustomWorkItem Data Value.
And you will do that for all other icon you want to change.

2) In CustomWorkItemResourcesDefinition.xml, it is showing how to display an icon based on png.
You will see what is configured here if you are running WDE with Blue, Fancy or Royale Theme.

<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/instagram.png" />
The format you have used for ImageUrl implies that the application will look for a resource part of the compiled application. And apparently that's not how you have declared your new images in your C# project. Check how existing image files are declared in the C# project sample (properties of the image in the sample - they are declared as Resource).

In your .csproj:

    <Resource Include="Images\MyButton.png" />

    <Resource Include="Images\CustomWorkItem.png" />

    <Resource Include="Images\CustomWorkItem.ico" />

    <Resource Include="Images\TransferCustomWorkItem.png" />

    <Resource Include="Images\MediaTypeCustomWorkItem.png" />

    <Resource Include="Images\CustomMoveToWorkbin.png" />

    <Content Include="Images\instagram.ico">

      <CopyToOutputDirectory>Always</CopyToOutputDirectory>

    </Content>

    <Content Include="Images\instagram.png">

      <CopyToOutputDirectory>Always</CopyToOutputDirectory>

    </Content>

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-03-2019 13:55
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

The changes have been made as instructed but its has been observed that images are still not visible but colors can be controlled by changing value in file CustomWorkItemResourcesDictionary.xaml.

how ever images are placed as provided in sample code.

https://drive.google.com/file/d/1Ir_8t0oruUtb7xgPcunhjfzGI_HiQh0y/view?usp=sharing

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 10-01-2019 11:16
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

As an additional comment, your compiled project is also missing the Resources/Theme/CustomWorkItemResourcesDictionary.xaml file.
You need to copy this file. It is where the scaval image/vector icon for customworkitem is defined in case of Default Theme.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 10-01-2019 11:12
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

As you are using the sample (which refers to a custom media type named "customworkitem"), I assume:
* You have created a new Media Type (In Business Attributes\Media Type\Attribute Values) for "customworkitem"
* You have added customworkitem in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = customworkitem, ...

2 things to mention on the sample:
* In order to load that module, the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config file refers to a task/permission named "InteractionWorkspace.CustomWorkItemSample.canUse"
As you may not have defined that custom permission in your system, I would sugget to change that to InteractionWorkspace.WorkItem.canUse during your tests (assuming you have assigned that permission/role to your agent) or even InteractionWorkspace.Voice.canUse (to make sure plugin will load as your agent is probably enabled for voice as well).

* The sample shows 2 ways to define/override the Media/Interaction icons:
- Using the method used in new themes, via Scalar image/VectorIcon
- Using the method from former/legacy themes, via a png

The scalar approach is used in Resources/CustomWorkItemResourcesDefinition85.xml (and the Resources/Theme/CustomWorkItemResourcesDictionary.xaml) using ResourceKey attribute approach.
- In Resources/CustomWorkItemResourcesDefinition85.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ResourceKey="Media.CustomWorkItem" />
The ResourceKey references Media.CustomWorkItem.
- In Resources/Theme/CustomWorkItemResourcesDictionary.xaml:
Media.CustomWorkItem is defined as a VectorIcon with its scalar data/image.
<Style x:Key="Media.CustomWorkItem" TargetType="{x:Type Path}" BasedOn="{StaticResource VectorIconCustomWorkItem}">
<Setter Property="Data" Value="M 6.53333,13.2L 11.8667,13.2L 11.8667,5.19995L 9.2,5.19995L 9.2,7.86664L 6.53333,7.86664L 6.53333,13.2 Z M 13.2,14.5333L 5.2,14.5333L 5.2,7.19995L 8.2,3.86664L 13.2,3.86664M 9.2,-6.10352e-005C 4.11867,-6.10352e-005 0,4.11865 0,9.19995C 0,14.2813 4.11867,18.4 9.2,18.4C 14.2813,18.4 18.4,14.2813 18.4,9.19995C 18.4,4.11865 14.2813,-6.10352e-005 9.2,-6.10352e-005 Z "/>
</Style>

The png approach is used in Resources/CustomWorkItemResourcesDefinition.xml (using ImageUrl attribute approach).
- In Resources/CustomWorkItemResourcesDefinition.xml:
<Value Id="Channel.OpenMedia.WorkItem.Image.customworkitem" ImageUrl="pack://application:,,,/Genesyslab.Desktop.Modules.CustomWorkItemSample;component/Images/CustomWorkItem.png" />

If you check the Genesyslab.Desktop.Modules.CustomWorkItemSample.module-config, you will see that CustomWorkItemResourcesDefinition85.xml is used/associated with the Default Theme (<theme name="Default" >)

So if you have started WDE and you are using Theme - Default, it means the configuration applying is the one CustomWorkItemResourcesDefinition85.xml.
If you want to change the icon, it is done in CustomWorkItemResourcesDictionary.xaml as vector image/data.

If you change theme to Blue/Royale/Fancy, CustomWorkItemResourcesDefinition.xml will then be used - and the png images are then the ones stored in Images folder.

You can also copy/override the <Value....> you want with ImageUrl directly in CustomWorkItemResourceDefinition85.xml (for the Default Them)

You can also find details about Image sizes in new theme, and converting image to vector here: https://docs.genesys.com/Documentation/IW/latest/Developer/MigrateYourCustomApplication#scrollNav-3

As you mentioned instagram media type in your original question, I assume it is clear that in that case:
- You would create a new Media Type (In Business Attributes\Media Type\Attribute Values) for "instagram"
- You would add instagram in the WDE Options - [interaction-workspace] - openmedia.workitem-channels = instagram, ...
- In the WDE plugin, you would use:
<Value Id="Channel.OpenMedia.WorkItem.Image.instagram" ..... />

Hope this helps clarifying.

------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-30-2019 06:18
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi Jerome,

I had arleady tried this, for some reason its not working.I am uploading the sample project

There is no error but icon is not appearing.

Code can be downloaded ehre.
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar

Google Docs		remove preview
Genesyslab.Desktop.Modules.CustomWorkItemSample.rar View this on Google Docs >

REgards

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd

Original Message:
Sent: 09-28-2019 02:53
From: Jerome St Marc
Subject: WDE Customization - New Channel icon

Hello,

You can check in the Workspace Desktop Edition 8.5 Developer's Guide - in the "Customizing Work Items" section - under "Customizing Workitem Icons" sub-section here: https://docs.genesys.com/Documentation/IW/latest/Developer/CustomizingWorkItems#scrollNav-6

You can define an icon for the Media Channel, for the Interaction. It would probably be also useful to set the Interaction icon in the Interaction History. You can see an example of the values to set for this 3 icons in the developer's guide.

Regards,

JSM


------------------------------
Jerome St Marc
Genesys - Employees

Original Message:
Sent: 09-27-2019 15:50
From: Hassan Shaikh
Subject: WDE Customization - New Channel icon

Hi, We have done customisation of Workspace to handle new interaction such as Instagram, WhatsApp, LinkedIn and YouTube. The functionality is working fine, however, we are not able to add icon of that specific channel.

I want to add icon on "My Channel" as well as the interaction pop-up toast window and case window

#Omni-ChannelDesktop/UserInterface

------------------------------
Hassan Shaikh
C Square Consulting PVT Ltd
------------------------------