Edit

Share via

Step 1: Create forms to define the layout and behavior of the notification 

  • Article

Omnichannel for Customer Service offers a suite of capabilities that extend the power of Dynamics 365 Customer Service Enterprise to enable organizations to instantly connect and engage with their customers across digital messaging channels. An additional license is required to access Omnichannel for Customer Service. For more information, see the Dynamics 365 Customer Service pricing overview and Dynamics 365 Customer Service pricing plan pages.

This topic describes how to define layout and behavior of the notification using forms.

Prerequisites

Create forms

  1. Sign in to the Dynamics 365 instance.

  2. Select the Down arrow next to Dynamics 365.

  3. Select Unified Service Desk Administrator.

  4. Select Forms and select + New.

  5. In the new form, specify the details.

Field  Value
Name  ToastNotification
Order  10
Markup  Copy and paste the XML content as shown below 
  <Border xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CCA="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Dynamics;assembly=Microsoft.Crm.UnifiedServiceDesk.Dynamics"
xmlns:Converters="clr-namespace:USDConverters;assembly=USDConverters" xmlns:local="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Dynamics;assembly=Microsoft.Crm.UnifiedServiceDesk.Dynamics"  xmlns:System="clr-namespace:System;assembly=mscorlib" BorderThickness="1,1,1,1" CornerRadius="0" >
 <Border.Resources>
  <SolidColorBrush x:Key="BorderDefaultBrush" Color="#FF000000"/>
  <SolidColorBrush x:Key="BorderHCBrush" Color="{x:Static SystemColors.WindowFrameColor}"/>
  <Style TargetType="{x:Type Border}">
   <Setter Property="BorderBrush" Value="{DynamicResource BorderDefaultBrush}" />
   <Style.Triggers>
    <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
     <Setter Property="BorderBrush" Value="{DynamicResource BorderHCBrush}"/>
    </DataTrigger>
   </Style.Triggers>
  </Style>
 </Border.Resources>
 <Grid Height="56" Width="320">
  <Grid.Resources>
   <local:CRMImageConverter x:Key="CRMImageLoader" />
   <System:String x:Key="NotificationIcon">[[NotificationIcon]+]</System:String>

   <Style x:Key="NotificationIconStyle" TargetType="{x:Type Image}">
    <Setter Property="Width" Value="17" />
    <Setter Property="Height" Value="16" />
    <Setter Property="Margin" Value="14,17,13,23" />
   </Style>

   <Style x:Key="CloseIcon" TargetType="{x:Type Image}">
    <Setter Property="Width" Value="16" />
    <Setter Property="Height" Value="16" />
    <Setter Property="Margin" Value="-2" />
   </Style>

   <SolidColorBrush x:Key="HCWindowTextColor" Color="{x:Static SystemColors.WindowTextColor}"/>
   <SolidColorBrush x:Key="HCBackgroundColor" Color="{x:Static SystemColors.WindowColor}"/>

   <Style x:Key="NotificationTextStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="Foreground" Value="#FFFFFF" />
    <Style.Triggers>
     <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
      <Setter Property="Foreground" Value="{DynamicResource HCWindowTextColor}"/>
     </DataTrigger>
    </Style.Triggers>
   </Style>

   <Style TargetType="{x:Type Grid}">
    <Setter Property="Background" Value="#003D60" />
    <Style.Triggers>
     <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
      <Setter Property="Background" Value="{DynamicResource HCBackgroundColor}"/>
     </DataTrigger>
    </Style.Triggers>
   </Style>
  </Grid.Resources>
  <Grid.RowDefinitions>
   <RowDefinition Height="auto" />
  </Grid.RowDefinitions>
  <Grid Grid.Row="0" Height="auto" >
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="44"/>
    <ColumnDefinition Width="276"/>
   </Grid.ColumnDefinitions>

   <Grid Grid.Column="0" Height="auto" >
    <Image Style="{StaticResource NotificationIconStyle}" Visibility="Visible" Source="{Binding Source={StaticResource NotificationIcon}, Converter={StaticResource CRMImageLoader}}" />
   </Grid>

   <Grid Grid.Column="1" Height="auto" >
    <Grid.RowDefinitions>
     <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Height="auto" Margin="0,7,0,0">
     <Grid.ColumnDefinitions>
      <ColumnDefinition Width="239"/>
      <ColumnDefinition Width="37"/>
     </Grid.ColumnDefinitions>
     <TextBlock Style="{DynamicResource NotificationTextStyle}" Grid.Column="0" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow" Text="[[ToastNotificationText]+]" VerticalAlignment="Center" FontSize="14" TextTrimming="WordEllipsis" FontFamily="Segoe UI"  LineHeight="16" FontWeight="SemiBold" />
     <Button Grid.Column="1" Margin="7,3,0,0" BorderThickness="0" Height="16" Width="16"  Command="CCA:ActionCommands.DoActionCommand" CommandParameter="https://uii/Omnichannel Toast Notification/Close" FontWeight="SemiBold" FontFamily="Segoe UI" >
      <Button.Style>
       <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="#00FFFFFF"/>
        <Setter Property="Panel.ZIndex" Value="3"/>
        <Setter Property="Template">
         <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">
           <Border Background="{TemplateBinding Background}">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
           </Border>
          </ControlTemplate>
         </Setter.Value>
        </Setter>
        <Style.Triggers>
         <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Background" Value="#00FFFFFF"/>
          <Setter Property="Cursor" Value="Hand"/>
         </Trigger>
        </Style.Triggers>
       </Style>
      </Button.Style>
      <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
       <Image Grid.Column="0" Style="{StaticResource CloseIcon}"  Source="{Binding Source=new_omni_notification_close_icon, Converter={StaticResource CRMImageLoader}}" />
      </StackPanel>
     </Button>
    </Grid>
   </Grid>
  </Grid>
 </Grid>
</Border>

Next topic: Step 2: Create Omnichannel Toast Notification hosted controls

See also