사용자 지정 창 레이아웃 만들기

아티클
04/18/2017

게시 날짜: 2016년 11월

적용 대상: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2013, Dynamics CRM 2015, Dynamics CRM 2016

Unified Service Desk의 패널 레이아웃은 시스템에서 다양한 레이아웃을 로드하는 기능을 제공하는 호스팅된 컨트롤입니다.Unified Service Desk는 에이전트 응용 프로그램에서 사용할 수 있는 미리 정의된 몇 가지 패널 레이아웃을 제공합니다. 자세한 내용은 Unified Service Desk의 창 레이아웃을 참조하십시오.

Unified Service Desk를 사용하면 사용자 요구 사항에 따라 Unified Service Desk 창 유형을 레이아웃하는 사용자 정의 또는 사용자 지정 창 레이아웃을 만들고 코드 숨김 XAML을 사용하여 경험을 향상시킬 수 있습니다.Microsoft Dynamics 365는 코드 숨김 지원을 사용하여 사용자 정의 창 레이아웃을 만들기 위한 Visual Studio 프로젝트 템플릿을 제공합니다.

이 항목에서는 패널 레이아웃을 만들고 스크립팅 에이전트 세션 정보를 표시하여 패널이 재정렬하고 관리자 및 연결된 경우 바탕 화면에서 왼쪽이 아닌 오른쪽에 메모를 나타나도록 하는 방법을 보여줍니다. 또한, 이 모든 정보를 표시하는 패널은 Unified Service Desk에서 자동으로 세션을 시작할 때 표시되고 수동으로 확장하고 축소하는 대신 세션이 닫힐 때 자동으로 사라집니다.

이 항목의 내용

필수 조건

사용자 지정 창 레이아웃 만들기

사용자 지정 창 레이아웃 테스트

필수 조건

Microsoft .NET Framework 4.5.2
Unified Service Desk 클라이언트 응용 프로그램입니다. 클라이언트 응용 프로그램은 에이전트 응용 프로그램을 사용하여 로그인 사용자 지정 패널 레이아웃 호스팅된 컨트롤을 테스트하는 데 필요합니다.
Microsoft Visual Studio 2012, Visual Studio 2013 또는 Visual Studio 2015
NuGetVisual Studio 2012, Visual Studio 2013 또는 Visual Studio 2015용 Nuget 패키지 관리자
사용자 지정 레이아웃 프로젝트 템플릿이 포함된 Visual Studio용 Microsoft Dynamics 365 SDK 템플릿. 다음 방법 중 하나로 얻을 수 있습니다.
- Visual Studio 갤러리에서 CRM SDK 템플릿을 다운로드합니다.CRMSDKTemplates.vsix 파일을 두 번 클릭하여 Visual Studio에 템플릿을 설치합니다.
- CRM SDK를 다운로드하고 설치합니다. 템플릿 파일 CRMSDKTemplates.vsix은 SDK\Templates 폴더에 있습니다.Visual Studio에서 파일을 두 번 클릭하여 템플릿을 설치합니다.

사용자 지정 창 레이아웃 만들기

Visual Studio를 시작하고 새 프로젝트를 만듭니다.
새 프로젝트 대화 상자에서:
1. 설치된 템플릿 목록에서 Visual C# 을 확장하고 Dynamics 365 템플릿 > Unified Service Desk > USD 사용자 지정 창 레이아웃 을 선택합니다.
2. .NET Framework 4.5.2 이 선택되었는지 확인합니다.
3. 프로젝트의 이름과 위치를 지정하고 확인을 클릭합니다.
솔루션 탐색기에서 CustomLayout.xaml 파일을 두 번 클릭하여 XAML 디자이너를 시작합니다.XAML 디자이너는 Unified Service Desk에 기본 창 레이아웃을 표시합니다.

CustomLayout.xaml 파일의 XAML 코드를 다음 샘플에 제공된 코드로 대체합니다. 이렇게 하려면 XAML 영역에서 모든 코드(CTRL + A)를 선택하고(그림과에서 같이) 삭제한 다음 같은 곳에서 제공하는 XAML 코드를 붙여 넣습니다. 이렇게 하면 확장 창의 위치가 왼쪽에서 오른쪽으로 변경됩니다.

사용자 지정 패널 레이아웃에 대한 XAML 코드 업데이트

<USD:PanelLayoutBase           
        x:Class="MyUSDCustomPanelLayout.CustomLayout"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
        mc:Ignorable="d" 
        xmlns:local="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Dynamics;assembly=Microsoft.Crm.UnifiedServiceDesk.Dynamics"
        xmlns:USD="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Dynamics.PanelLayouts;assembly=Microsoft.Crm.UnifiedServiceDesk.Dynamics"
        d:DesignHeight="500" d:DesignWidth="500">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <local:CRMImageConverter x:Key="CRMImageLoader" />
            <Style x:Key="ImageLogo" TargetType="{x:Type Image}">
                <Setter Property="FlowDirection" Value="LeftToRight"/>
                <Setter Property="Width" Value="161" />
                <Setter Property="Height" Value="25" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" BorderBrush="#d8d8d8" BorderThickness="0,1,0,1">
            <Grid Background="{DynamicResource WindowHeaderStyle}" Grid.Row="0"  Margin="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{Binding Source=msdyusd_Logo, Converter={StaticResource CRMImageLoader}}"  Style="{DynamicResource ImageLogo}"   />
                <Rectangle Width="10" Grid.Column="1" />
                <USD:USDDeckTabPanel x:Name="ToolbarPanel" Grid.Column="2" AutomationProperties.Name="Toolbar Panel" VerticalAlignment="Stretch" Focusable="False" Margin="1" />
                <Grid Grid.Column="3">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="412"/>
                    </Grid.ColumnDefinitions>
                    <Grid.Background>
                        <ImageBrush ImageSource="{Binding Source=msdyusd_Office15, Converter={StaticResource CRMImageLoader}}" Stretch="Fill" ></ImageBrush>
                    </Grid.Background>
                    <USD:USDStackPanel Grid.Column="0" x:Name="CtiPanel"  Orientation="Horizontal" Focusable="False" VerticalAlignment="Center" AutomationProperties.Name="Cti Panel" SelectedAppChanged="SelectedAppChangedHander"/>
                    <USD:USDStackPanel Grid.Column="1" HorizontalAlignment="Right" x:Name="AboutPanel"  Orientation="Horizontal" Focusable="False" VerticalAlignment="Center" AutomationProperties.Name="AboutPanel"/>
                </Grid>
            </Grid>
        </Border>
        <Grid Grid.Row="1" VerticalAlignment="Stretch" Margin="0" Background="{DynamicResource WindowBackgroundStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <USD:USDDeckTabPanel x:Name="SessionTabsPanel" Grid.Row="0" Margin="5,5,0,5" AutomationProperties.Name="Session Tabs Panel" Focusable="False" ClipToBounds="True" />
            <Grid x:Name="MainGrid" Grid.Row="1" AutomationProperties.Name="Main Panels">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <Expander Grid.Column="1" Style="{DynamicResource StretchExpanderStyle}"  ExpandDirection="Right" x:Name="RightExpander" IsExpanded="false" BorderBrush="White" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed" >
                    <Grid Style="{DynamicResource LeftPanelGrid}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" Name="ChatPanelRow" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <USD:USDCollapsePanel x:Name="SessionExplorerPanel" AutomationProperties.Name="Session Explorer Panel" Grid.Row="0" Margin="1" SelectedAppChanged="SelectedAppChangedHander" />
                        <USD:USDCollapsePanel x:Name="WorkflowPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="1" Margin="1" SelectedAppChanged="SelectedAppChangedHander" />
                        <USD:USDCollapsePanel x:Name="ChatPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="2" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                        <USD:USDCollapsePanel x:Name="LeftPanel1" AutomationProperties.Name="Left Panel 1" Grid.Row="3" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                        <USD:USDCollapsePanel x:Name="LeftPanel2" AutomationProperties.Name="Left Panel 2" Grid.Row="4" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                        <USD:USDDeckTabPanel x:Name="LeftPanelFill" AutomationProperties.Name="Left Panel Fill" Grid.Row="5" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                    </Grid>
                </Expander>
                <Grid Grid.Column="0" Background="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <USD:USDCollapsePanel x:Name="RibbonPanel" Grid.Row="0" Visibility="Collapsed"  AutomationProperties.Name="Ribbon Panel" Focusable="False" Margin="1" ClipToBounds="False" SnapsToDevicePixels="True" />
                    <USD:USDTabPanel x:Name="MainPanel" Grid.Row="1" AutomationProperties.Name="Main Panel" SelectedAppChanged="SelectedAppChangedHander"/>
                </Grid>
            </Grid>
        </Grid>
        <StatusBar Margin="0" Background="{DynamicResource WindowHeaderStyle}"  Grid.Row="2" Height="auto" VerticalAlignment="Bottom">
            <StatusBarItem Background="{DynamicResource WindowHeaderStyle}" >
                <USD:USDStackPanel x:Name="StatusPanel" Orientation="Horizontal" AutomationProperties.Name="Status Panel" Margin="1" SelectedAppChanged="SelectedAppChangedHander" />
            </StatusBarItem>
        </StatusBar>
    </Grid>
</USD:PanelLayoutBase>

바로 가기 키를 정의하여 사용자 지정 패널 레이아웃의 패널에서 액세스할 수 있습니다.추가 정보:패널에 대한 바로 가기 키
솔루션 탐색기에서 CustomLayout.xaml 파일을 마우스 오른쪽 단추로 클릭하고 코드 보기를 클릭하여 XAML에 코드 숨김을 표시합니다. 그려면 CustomLayout.xaml.cs 파일이 열립니다.
다음 코드를 추가하여 NotifyContextChange 메서드를 정의를 업데이트합니다.
```
if (context.Count != 0)
{
   RightExpander.IsExpanded = true;
}
else
{ 
   RightExpander.IsExpanded = false;
}
```
코드는 Unified Service Desk에서 세션이 활성인지 확인하고 확장 창을 자동으로 표시(확장) 또는 숨깁니다(축소).

이것은 업데이트된 NotifyContextChange 메서드 정의입니다.
프로젝트를 저장하고 빌드하여(빌드 > 솔루션 빌드) 성공적으로 빌드되는지 확인합니다.

참고

CustomLayout.xaml.cs 파일에서 사용자 지정 패널 레이아웃을 작성하는 데 사용되는 클래스 이름을 기록합니다. 이 경우 CustomLayout입니다. 다음 단계에서 이 정보가 필요합니다.

사용자 지정 창 레이아웃 테스트

프로젝트가 성공적으로 빌드된 후 사용자 지정 창 레이아웃을 테스트합니다. 테스트는 서버에 사용자 지정 창 레이아웃 호스팅된 컨트롤을 정의한 다음 클라이언트 디렉터리에 있는 사용자 지정 코드 어셈블리가 있는 클라이언트 응용 프로그램을 사용하여 서버에 있는 Unified Service Desk에 로그인하는 두 부분을 포함합니다.

서버에서 사용자 지정 창 레이아웃 호스팅된 컨트롤을 정의합니다.

Microsoft Dynamics 365에 로그인합니다.
탐색 모음에서 Microsoft Dynamics 365을 선택하고 설정을 선택합니다.
설정 > Unified Service Desk > 호스팅된 컨트롤을 선택합니다.
새로 만들기를 선택하고 다음 그림처럼 새 호스팅된 컨트롤 화면에서 값을 지정합니다.

참고

어셈블리 URI는 어셈블리의 이름이고 어셈블리 유형은 어셈블리 파일의 이름(dll)이며, 점(.)이 뒤에 붙습니다.Visual Studio 프로젝트의 클래스 이름이 뒤에 붙습니다. 이 예제에서 어셈블리의 이름은 MyUSDCustomPanelLayout이고 클래스 이름은 CustomLayout이며, 이는 사용자 지정 창 레이아웃을 만들 때 기본 클래스 이름입니다.
호스팅된 컨트롤을 저장합니다.

Unified Service Desk 클라이언트를 실행하여 사용자 지정 창 레이아웃 작업 수행

Visual Studio 프로젝트 디버그 폴더에서 Unified Service Desk 응용 프로그램 디렉터리(기본값: c:\Program Files\Microsoft Dynamics CRM USD\USD)로 사용자 지정 호스팅된 컨트롤 정의를 포함하는 어셈블리(dll)를 복사합니다.
Unified Service Desk 클라이언트를 실행하여 Dynamics 365 서버에 연결합니다.
성공적으로 로그인하면 확장 창을 사용자 지정 패널 레이아웃을 볼 수 있습니다. 확장 창은 오른쪽에 포함되었습니다.
도구 모음에서 검색을 선택한 다음 세션에 표시될 레코드를 선택합니다. 이러한 경우 검색 창에서 연락처를 선택한 후 **Maria Campbell (Sample)**을 선택합니다. 오른쪽 창에서 세션과 관련된 데이터, 스크립트, 에이전트 및 현재 연락처 레코드에 대한 기타 정보를 표시하도록 자동으로 나타납니다.
상단의 세션 탭에서 십자를 클릭하여 세션을 닫으면 오른쪽 창이 자동으로 닫히거나 축소됩니다.

참고

여러 세션에서 발생하는 경우 오른쪽 창에서 표시할 세션에 있는 모든 탭을 닫을 때까지 계속됩니다.

참고 항목

사용자 지정 패널 레이아웃에 호스팅된 컨트롤 표시
Unified Service Desk의창 , 창 유형 및 창 레이아웃

Unified Service Desk 2.0

© 2017 Microsoft. All rights reserved. 저작권 정보