ActiveReports 11
Customizing the Flash Viewer UI
ActiveReports 11 > ActiveReports User Guide > Samples and Walkthroughs > Walkthroughs > Common Walkthroughs > Professional > Customizing the Flash Viewer UI
Show All
Hide All

You can customize the Flash Viewer UI, using javascript functions. This walkthrough illustrates how to customize the look and feel of the Flash Viewer.

The walkthrough is split up into the following activities:

To follow the steps of this walkthrough, you must first complete the steps on creating an ASP.NET Web site and setting up the FlashViewer, described in the Flash Viewer walkthrough.

To customize the Flash Viewer options

  1. Select the WebViewer on your .aspx page, and in the Properties window, expand the FlashViewerOptions node.
  2. Set the property UseClientApi (FlashViewerOptions) to True (this property is set to False by default).

  3. Declare a variable and attach the FlashViewer by adding the following code onto the .aspx source view.

    Paste the code into .aspx source
    Copy Code 
    <script language="javascript" type="text/javascript">
var viewer;

function init() { GrapeCity.ActiveReports.Viewer.OnLoad ("WebViewer1", function() {
  viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1"); });
}
</script>

...

<body onload="return init()">

  4. Drag the Html Input (button) control from the Visual Studio toolbox onto the .aspx design view, containing the WebViewer control.

  5. Double-click the Button control and paste the following code:

    Paste the code into .aspx source
    Copy Code 
    <input id="button1" type="button" value="button" onclick="return Button1_onclick()" />

  6. Add the following function for this button:

    Paste the code into .aspx source
    Copy Code 
    function Button1_onclick() { 
        var zoom = viewer.getZoom(); 
                alert("Check that zoom property is changed from " + zoom); 
                zoom += 0.1; 
                viewer.setZoom(zoom);
                alert("to " + zoom);
}
    Note: You can declare a variable and attach the FlashViewer in the event handler directly.
    Paste the code into .aspx source
    Copy Code 
    function Button1_onclick()
{
var viewer;
viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");
...
}

Available Flash Viewer properties

The properties below use a pair of the getter and setter functions, which names are formed as {get|set}<PropertyName>().

Property Name

 Description

CurrentPage

Integer. Gets or sets the page for a currently selected view.

HyperLinkBackColor

String. Gets or sets the background color for all hyperlinks in a document. This value is applied only after a new document is loaded. The format is "#FF0000" (#RRGGBB).
HyperLinkForeColor String. Gets or sets the color for all hyperlinks in a document. This value is applied only after a new document is loaded. The format is "#FF0000" (#RRGGBB).

HyperLinkUnderline

 Boolean. Gets or sets a value determining whether the text of all hyperlinks in a document is underlined. This value is applied only after a new document is loaded.

SearchResultsBackColor

 String. Gets or sets the background color of the highlighted text when using the Find dialog. The format is "#FF0000" (#RRGGBB).
SearchResultsForeColor String. Gets or sets the color of the highlighted text when using the Find dialog. The format is "#FF0000" (#RRGGBB).
PaperColor String. Gets or sets the paper color of the report. The format is "#FF0000" (#RRGGBB).
ShowSplitter

Boolean. Gets or sets a value determining whether to display a splitter. If set to True, the splitter is shown.
TargetView String. Gets or sets a value that specifies which view - Primary or Secondary, is currently active. If the ShowSplitter property is set to False, then you cannot switch to the Secondary view.
ThemeUrl String. Gets or sets a value specifying the relative URL of a skin to use on the Flash Viewer.
Zoom Integer. Gets or sets a value that specifies the zoom level at which to display the report.
TocPanel

Object. Gets the Table of Contents Panel object. This property is read-only.

  • Alignment To align the TOC panel.
  • ShowThumbnails To specify whether to display a pane with thumbnail views of pages.
  • ShowToc To specify whether to display the table of contents pane.
  • Visible To specify whether to display the Table of contents.
  • Width To specify the Table of contents width.
ViewType String. Gets or sets the current ViewType value.
EventsHandler Object. Gets or sets the events handler container.

Available Flash Viewer methods

Note: Except for the below mentioned methods, {get|set}<Property Name>() method can be used for all the properties. See Flash Viewer topic for details.
Method Name Description

LoadDocument(string documentUrl)

Loads the RDF document. You may use an RDF file that resides on a server, RpxHandler, CompiledReportHandler or custom Http handler implementation to provide a streamed document. This method cancels the current document's loading.

Code example

Paste the code into .aspx source
Copy Code 
function btnLoadDoc_onclick() 
{
    viewer.LoadDocument("RpxHandler/NwindLabels.rpx?&OutputFormat=Rdf3");
}

CancelDocumentLoad()

Cancels the loading of a current document.
Print(PrintOptions options) Causes the Viewer to wait until all required pages are loaded, displayed in the Print dialog and starts printing. The PrintOptions are similar to the WebViewer.PrintOptions, except that the PageRangesCollection methods are merged into the PrintOptions class.

CreatePrintOptions()

 Creates options for the Print() method.

setViewType(string viewType, int multiPageRows, int multiPageCols)

Specifies the view mode.

Possible values for the first parameter are specified in the ViewType enumeration. The last two parameters are applied for ViewType.MultiPage only.

To handle Flash Viewer Events

  1. Declare a variable, attach the Flash Viewer and add event handlers by adding the following code onto the .aspx source view.
Paste the code into .aspx source
Copy Code 
<script language="javascript" type="text/javascript">
var viewer;
function init() {
GrapeCity.ActiveReports.Viewer.OnLoad("WebViewer1", function() {
viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");
    viewer.setEventsHandler({
       <EVENTS>

    });
});
}
</script>
...

<body onload="return init()">
Note: <EVENTS> are described in detail in the Available events list below.

Available events

Event Description

OnLinkClick(LinkEventArgs)

Specifies the URL value of a linked item or a string. This event is raised when a report object with a hyperlink is clicked; this event overrides the default Hyperlinks behavior that simply opens another browser window. Cancelable.

The event handler receives an argument of type LinkEventArgs containing data related to this event. The handler argument has the field "Link". The field "Link" returns the hyperlink URL value.

Code example
Copy Code 
OnLinkClick: function(e) 
        { 
                alert(e.Link);//specifies url of the link item, string
                  return true;
        }

OnError(ErrorEventArgs)

Fires when an application fires an error or a warning. Use this event to customize FlashViewer error messages and warnings.

The event handler receives an argument of type ErrorEventArgs containing data related to this event. The handler argument has the following fields - "ErrorType" and "Message".

The field "ErrorType" contains the error type value; the field "Message" contains a description of a Flash Viewer problem.

This event allows suppressing any notifications to a user.

Code example
Copy Code 
OnError: function(e) 
        { 
                alert(e.Message);       //error message, string
                alert(e.ErrorType);     //possible types are "Error" and "Warning", string
                return false;
        }
OnLoadProgress(LoadProgressArgs)

Raised during the processing of a report.

The event handler receives an argument of type LoadProgressArgs containing data related to this event. The handler argument has the following fields - "PageCount", "PageNumber" and "State". Return value is ignored in case of this event.

The field "PageCount" returns the total count of report pages.

The field "PageNumber" returns the page number of the processed report.

The field "State" returns the value, indicating the state of the report's processing; the possible values are "Completed", "InProgress" and "Cancelled".

In Progress: Indicates the loading state of the report.

Cancelled: Indicates a states where loading of a report is cancelled.

Completed: Indicates a state where loading of a report is complete.

Code example
Copy Code 
OnLoadProgress: function(e)
{
        if(e.State == "InProgress") {
                if(e.PageNumber == 10) {
                        alert("10 pages are loaded");
                }
        }
                    
        if(e.State == "Cancelled"){
                alert("Report processing is cancelled");
        }
                
        if(e.State == "Completed")// possible value are Completed, InProgress and Cancelled
        {
                alert("Report loading is completed, total page count is" + e.PageCount);
        }
                    
        //return value is ignored in this event
}

OnTargetViewChanging(TargetViewChangeEventArgs)

Raised while a report's view is changing.

The event handler receives an argument of type TargetViewChangedEventArgs containing data related to this event. The handler argument has the following fields - "CurrentView" and "NewView".

The field "CurrentView" returns the currently selected view value.

The field "NewView" returns the newly selected view value.

Code example
Copy Code 
OnTargetViewChanging: function(e)
        {
                alert("Currently selected view is " + e.CurrentView);   //gets currently selected view, string
                alert("Newly selected view is " + e.NewView);           //gets newly selected view, string
                return false;                                           //cancelable event
        }

OnToolClick(ToolClickEventArgs)

Raised by clicking the toolbar button. Cancelable.

The event handler receives an argument of type ToolClickEventArgs containing data related to this event. The handler argument has the following field - "Tool".

The field "Tool" returns the name of a clicked button.

Code example
Copy Code 
OnToolClick: function(e)
        {
                alert(e.Tool);
                return false;
        }
OnCurrentPageChanged(CurrentPageChangeEventArgs)

Raised each time a current page is changed within the current view programmatically or by any user navigation command. This event is also raised when the current view (primary or secondary) is changed.

The event handler receives an argument of type CurrentPageChangedEventArgs containing data related to this event. The handler argument has the following fields - "PageNumber" and "ViaApi".

The field "PageNumber" contains the 1-based page number. The field "ViaApi" specifies whether the event is raised by setting the page number in the CurrentPage property.
Note: Use the "return true;" value to show that the client side has handled the event. The "return false;" value indicates that the event was not handled.