Create an info panel preview section in xxx_Config.xml file

Build 1501 on 14/Nov/2017  This topic last edited on: 6/Sep/2016, at 13:33

The info panel preview section defines the fields and the layout of the preview panel on the given main tab (typically in the right expander).

Create the info panel preview section in the xxx_Config.xml file (where xxx may be Ted4, Fred4, Shell4 or Edadmin4), the same file you were editing in the step Creating a base query section in xxx_Config.xml file.

The text in blue is free text, but referenced elsewhere, which means you can follow our indications, or specify what you want, but be coherent, while the text in red is related to specific tab, and it has to be customized to keep the naming coherent.

In this example, we're showing the infopanel for the contact object.

hmtoggle_plus1Example

<InfoPanel Name="Contact" ObjectTypeName="contact">

      <DataTemplate>

        <Grid>

          <Grid.Resources>

            <DataTemplate x:Key="frontFlipper">

              <Border MinWidth="200" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}}" Padding="2,2,2,2" Margin="-2,2,-2,2">

                <Grid HorizontalAlignment="Stretch">

                  <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="90"/>

                    <ColumnDefinition Width="*"/>

                  </Grid.ColumnDefinitions>

                  <Grid.RowDefinitions>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                    <RowDefinition Height="Auto"/>

                  </Grid.RowDefinitions>

                  <Button Width="Auto" Height="25" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top"  Command="{x:Static l:FlipperContentControl.Toggle}">

                    <StackPanel Orientation="Horizontal">

                      <l:ConfigIcon IconName="tlb_Edit" Size="16"/>

                      <TextBlock Text="Edit" Margin="4,0,0,0"/>

                    </StackPanel>

                  </Button>

 

                  <xp:StackPanel Orientation="Horizontal"  VerticalAlignment="Top" Margin="0,6,0,6"  Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">

                    <l:ObjectTypeIcon ObjectType="{Binding Path=ObjectType}" Size="16"/>

                    <l:HighlightTextBlock Style="{StaticResource ShellInfoValueStyle}" HighlightText="{Binding Path=[contact.nameTitle]}" FontSize="12"/>

                  </xp:StackPanel>

 

                  <l:HighlightTextBlock Style="{StaticResource ShellInfoValueStyle}" HighlightText="{Binding Path=[contact.lastName]}" Grid.Row="2" Grid.ColumnSpan="2" Margin="0,6,0,6" FontStyle="Italic" FontSize="12"/>

                  <Line X1="1" Y1="1" X2="400" Y2="1" Stroke="Gray" StrokeDashArray="2,2" StrokeThickness="1" Grid.Row="3" Grid.ColumnSpan="2" Margin="0,6,0,6" />

 

                </Grid>

              </Border>

            </DataTemplate>

            <DataTemplate x:Key="backFlipper">

              <Grid>

                <l:EditItemsControl EditObjectUIGroupName="EditPanel"

                                                           ShellMode="Update" ObjectId="{Binding Path=[contact.id]}"

                                                           PostApplyCommand="{x:Static l:Commands.Script}" PostApplyCommandParameter="Refresh"/>

                <Button Width="Auto" Height="25"  HorizontalAlignment="Right" VerticalAlignment="Top"  Command="{x:Static l:FlipperContentControl.Toggle}">

                  <StackPanel Orientation="Horizontal">

                    <l:ConfigIcon IconName="tlb_Options" Size="16"/>

                    <TextBlock Text="Back" Margin="4,0,0,0"/>

                  </StackPanel>

                </Button>

              </Grid>

            </DataTemplate>

          </Grid.Resources>

          <l:FlipperContentControl VerticalAlignment="Stretch" HorizontalAlignment="Stretch"

                                   FrontContent="{Binding}"

                                   BackContent="{Binding}"

                                   FrontContentTemplate="{StaticResource frontFlipper}"

                                   BackContentTemplate="{StaticResource backFlipper}">

          </l:FlipperContentControl>

        </Grid>

      </DataTemplate>

    </InfoPanel>

See also

Creating an info panel popup section in xxx_Config.xml file

Creating a main tab edit panel section in xxx_Config.xml file