Share via

Defining the layout of a Card Viewer

  • Article

You must create an ASP, ASPX, or HTML file to define the layout of your Card Viewer. The following example shows the HTML code used to define the layout of the Customer Address Card Viewer, found on the Customers page (Sales > Customers) of the Business Portal for Great Plains.

<html XMLNS:CV>

    <head>
        <?IMPORT namespace="CV" implementation="/BusinessPortal/UI/ResultViewer/Scripts/Card.htc" />

        <title>Card Viewer</title>
    </head>

    <script>
        function OnCardViewerReady()
        {
            CardViewerID.AddStyleSheet("/BusinessPortal/UI/ResultViewer/StyleSheets/CardViewer.css");
        }
    </script>

    <body style="margin:0px;overflow:hidden;">
        <CV:Card
            id="CardViewerID"
            InitialQuery="/DataViewer/Customer Card/Customer Information"
            EventNameSpace="Microsoft.Dynamics.Receivables.Customer.Customer"
            SupportsAutoRefresh="false"
            AutoRefresh="30"
            CardFile="/BusinessPortal/Static/CustomerCard1.htm"
            HasActionArea="false"
            HasControlArea="false"
            HasNavigation="false"
            HasStatusArea="false"
            QueryServiceUrl="/BusinessPortal/QueryWebService.asmx?WSDL"
            SupportsPageSize="true"
            PageSize="10"
            onReady="OnCardViewerReady()"
        />
    </body>

</html>

The ?IMPORT element has a namespace attribute and an implementation __ attribute. The namespace attribute specifies the namespace of the Card Viewer. The implementation attribute specifies the path to the HTC component implementing the Card Viewer.

<?IMPORT namespace="CV" implementation="/BusinessPortal/UI/ResultViewer/Scripts/Card.htc" />

The AddStylesheet() method is called to apply the Card Viewer stylesheet settings to the result viewer. This method takes the URL location of the stylesheet as a parameter.

function OnCardViewerReady()
{
    CardViewerID.AddStyleSheet("/BusinessPortal/UI/ResultViewer/StyleSheets/CardViewer.css");
}

The location of the HTML file that defines the content of a Card Viewer is set by assigning the location to the CardFile property. For more information on this file, see Defining the content of a Card Viewer.

CardFile="/BusinessPortal/Static/CustomerCard1.htm"

The location of the Query Web Service is set by assigning the location to the QueryServiceURL property.

QueryServiceUrl="/BusinessPortal/QueryWebService.asmx?WSDL"

The InitialQuery property specifies the query that will be displayed when the Card Viewer is initialized. You must supply a path to an existing query.

InitialQuery="/DataViewer/Customer Card/Customer Information"