Tag Archives: Customization

Enable HTTPS mode in SqlReportViewer and SQL Report Service

Normally, SQL Report Service (SSRS) is configured to run in HTTP by default. In this blog post, I will show you the steps required to configure the SSRS to use HTTPS mode, and how to configure the SqlReportViewer control to target the HTTPS-enabled report server.

First, you can set HTTPS mode in SSRS by clicking Advanced button.

SSRS Configuration

When configuring HTTPS, please use a valid Certificate for HTTPS. In this case, please contact your Certificate vendor.

Once SSRS has been configured HTTPS, it will look like the following screenshot.

SSRS HTTPS Configuration

Now that the SSRS server has been changed to HTTPS, the ReportServer property of the SqlReportViewer needs to be changed as well.

Example:

<Intersoft: SQLReportViewer ReportServer=”https://win7-x32-1:443/ReportServer”/>

Finally, in order to support HTTPS mode completely, you need one more additional setting in the web.config of the web application that hosts the Silverlight application. Otherwise, you will get the error below.

Error Configuration

To resolve the error, change the security mode from TransportCredentialOnly to Transport in web.config. These changes are important due to the nature of HTTPS which requires more secure communication channel.

The code in the web.config looks like the following.

Config Changes

If you have any difficulties or issues regarding this scenario, please feel free to leave your comment, or post your questions to Intersoft Community.

Warm Regards,
Handy

Customize UXFlow Appearance Based on Item Position

The latest ClientUI release (2011 R2 SP1) introduces several enhancements for UXFlow control. Some of the significant enhancements are the new AutoReflection property and PositionStates visual states. They are introduced to set different styles in UXFlowItem according to its position.

The new PositionStates enhancement enables you to customize the layout and appearance of the item based on the flow position. See the following illustration.

Customize UXFlowItem based on the position

In this blog, I’m going to share how to achieve the above scenario in a step-by-step walkthrough.

1. Put additional text to the UXFlowItem.

You will need Microsoft Expression Blend to edit the ItemContainerStyle of the UXFlow control.Edit ItemContainerStyle

After the generated template is shown, put the text in CoverElementPerspective. CoverElementPerspective contains the ImageLoader of UXFlowItem. That’s the reason why the text requires to be put in that element. In this case, TextBlock is used as the text.

To easily maintain the layout, let’s use Grid and StackPanel container with configuration as shown below:

<Intersoft:ContentPerspective x:Name="CoverElementPerspective" AutoRefresh="False" EnableReflection="{TemplateBinding EnableReflection}" VerticalContentAlignment="Bottom">
     <Border Background="Silver" BorderBrush="#8D8D8D" BorderThickness="2" CornerRadius="8">
          <StackPanel>
                 <Grid >
                        <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                                   <ColumnDefinition/>
                                   <ColumnDefinition Width="Auto"/>
                              </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                        <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Intersoft:ContentTransformer x:Name="ContentTransformer" Grid.ColumnSpan="2">
                               <TextBlock Text="{Binding Contact.Name}" FontSize="24" Margin="4" HorizontalAlignment="Center"/>
                        </Intersoft:ContentTransformer>
                        <Intersoft:ImageLoader Grid.Row="1" Grid.Column="1"   ImageStretch="None" x:Name="CoverElementImage" AutoSyncPerspectiveReflection="False" ImageSource="{TemplateBinding ImageSource}" ProgressBarHorizontalAlignment="Stretch" ProgressBarVerticalAlignment="Bottom" ProgressTextVisibility="Collapsed"  ProgressBarMargin="15,0,15,15"/>
                </Grid>
                <StackPanel x:Name="info" >
                        <TextBlock Text="{Binding Contact.Email}" TextAlignment="Center" FontSize="10" />
                        <TextBlock Text="{Binding Contact.Twitter}" TextAlignment="Center" FontSize="10"/>
                </StackPanel>
         </StackPanel>
    </Border>
</Intersoft:ContentPerspective>                                                                                                                                                                                                                                                                                                                    

2. Implement the visual state and switch the position by using PositionStates in VisualStateGroup.

As stated before, PositionStates is available only in the SP1 release.

<VisualStateGroup x:Name="PositionStates">     
     <VisualState x:Name="LeftSide"/>     
     <VisualState x:Name="Center"/>     
     <VisualState x:Name="RightSide"/> 
</VisualStateGroup>

The PositionStates is automatically generated after you use EditItemContainer template.

Center is the default state when an item is selected. Therefore, you only need to customize position, animations and styles for the LeftSide and RightSide.

<VisualStateGroup x:Name="PositionStates">
      <VisualState x:Name="LeftSide">
             <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Transform)" Storyboard.TargetName="ContentTransformer">
                          <DiscreteObjectKeyFrame KeyTime="0">
                                 <DiscreteObjectKeyFrame.Value>
                                        <CompositeTransform Rotation="-90"/>
                                 </DiscreteObjectKeyFrame.Value>
                          </DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Margin)" Storyboard.TargetName="ContentTransformer">
                         <DiscreteObjectKeyFrame KeyTime="0" Value="20,20,0,20">                     
			 </DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ContentTransformer">
                     	 <DiscreteObjectKeyFrame KeyTime="0">                          
			 	<DiscreteObjectKeyFrame.Value>                               
					<System:Int32>1</System:Int32>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ContentTransformer">
                        <DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<System:Int32>2</System:Int32>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="info">                     
			<DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<Visibility>Collapsed</Visibility>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>          
	     </Storyboard>     
       </VisualState>     
       <VisualState x:Name="Center"/>     
       <VisualState x:Name="RightSide">          
	    <Storyboard>               
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Transform)" Storyboard.TargetName="ContentTransformer">                     
			<DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<CompositeTransform Rotation="90"/>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>               
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Margin)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0" Value="0,20,20,20">                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>2</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ContentTransformer">
                    	<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>1</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>2</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="info">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<Visibility>Collapsed</Visibility>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>         
	   </Storyboard>      
     </VisualState> 
</VisualStateGroup>

3. Set AutoRefreshReflection to true.

When using the default UXFlow configuration, the reflection will be automatically cached. This may cause a reflection issue while switching the styles. To avoid this issue, simply set AutoRefreshReflection to true.

You can also download the sample project for your references.

I hope this post can give you some insights about styling with UXFlow control. As usual, feedback and comments are always welcome.

Warm Regards,
Handy

Customize date header in WebScheduler Timeline View

In addition to dozens of new products introduced in 2009, we also improved existing flagship products such as WebScheduler with top-received feedback to support broader range of scenarios. In this post, I’d like to share a nice newly added feature in WebScheduler. This new feature enables you to customize the date format display in the header area to suit your needs. Called DateHeaderMode, this feature is supported only in TimelineView.

Please look at the following screen shot:

DefaultHeaderMode

From the above screenshot, notice that the Timeline’s date header is displayed with date number only, which is the default value for this feature.

Starting with WebScheduler v2 build 219, we have added 5 new options for Timeline’s date header that you can choose:

  1. DateNumber
    Timeline’s date header displays the date’s number. This is the default behavior of Timeline’s date header.
  2. DayName
    Timeline’s date header is displayed with day name, for example: Sunday, Monday, Tuesday.
    DateHeaderModeDayName
  3. ShortestDayName
    Timeline’s date header displays the shortest day name, for example: Su, Mo, Tu.
    DateHeaderModeShortestDayName
  4. DateNumberAndDayName
    Timeline’s date header displays the date’s number and the day name. for example: 1 Sunday, 2 Monday, 3 Tuesday.
    DateNumberDayName
  5. DateNumberAndShortestDayName
    Timeline’s date header displays the date’s number and the shortest day name. for example: 1 Su, 2 Mo, 3 Tu.
    DateNumberShortestDayName

In addition to the above options, DateHeaderMode also supports WebScheduler’s Culture setting so the DateHeader information will be displayed based on the culture that you specified. For example, if WebScheduler’s culture is set to Germany, then WebScheduler will display the date information in Germany language such as Donnerstag, Freitag, Samstag.

You can find DateHeaderMode property in WebScheduler > ViewSettings >> TimelineView.

If you have questions or feedback on  this new feature, please feel free to comment on my post.

Best Regards,
Budianto Muliawan