Share via

Defining the content of a Card Viewer

  • Article

To define the content of your Card Viewer, you must create an HTML file. This file specifies the fields that will be displayed in the Card Viewer, as well as the query columns that contain the data to be displayed in those fields.

The following example shows the HTML code used to define the content of the Customer Address Card Viewer, found on the Customers page (Sales > Customers) of the Business Portal for Great Plains.

<LINK rel='stylesheet' type='text/css' href='/BusinessPortal/UI/ResultViewer/StyleSheets/CardViewer.css'>

<body style="margin:0px;overflow:hidden;">

<table class="CustomerCard" id="CustomerCard">
    <tr>
        <td class="CustomerName" id="CustomerContact" dataField="Customer.PrimaryAddress.ContactPerson" dataType="text" colspan="5"></td>
    </tr>
    <tr>

    <td class="CustomerContactInfo" id="CustomerContactInfo" valign="top">
        <fieldset class="CustomerContactFrame" id="CustomerContactFrame">

        <div class="CustomerAddress" id="CustomerName" dataField="Customer.Name" dataType="text"></div>

        <div class="CustomerAddress" id="CustomerAddress1" dataField="Customer.PrimaryAddress.Address1" dataType="text" style="display:block"></div>

        <div class="CustomerAddress" id="CustomerAddress2 " dataField="Customer.PrimaryAddress.Address2" dataType="text" style="display:block"></div>

        <div class="CustomerAddress" id="CustomerAddress3" dataField="Customer.PrimaryAddress.Address3" dataType="text" style="display:block"></div>

        <div class="CustomerCity" id="City" dataField="Customer.PrimaryAddress.City" dataType="text" style="display:inline"></div>

        <div class="CityStateSeparator" id="CityStateSeparator" style="display:inline">,&nbsp;</div>

        <div class="CustomerState" id="State"dataField="Customer.PrimaryAddress.State" dataType="text" style="display:inline"></div>

        <div class="StateZipSeparator" id="StateZipSeparator" style="display:inline">&nbsp;&nbsp;</div>

        <div class="CustomerZip" id="Zip" dataField="Customer.PrimaryAddress.PostalCode" dataType="text" style="display:inline"></div>

        <div class="CustomerCountry" id="CustomerCountry" dataField="Customer.PrimaryAddress.Country" dataType="text"></div>
        <hr>

        <div class="PhoneHeader" id="PhoneHeader1" style="display:inline">Phone 1: </div>

        <div class="CustomerPhone" id="CustomerPhone1" dataField="Customer.PrimaryAddress.Phone1" dataType="text" style="display:inline"></div>
        <br>

        <div class="PhoneHeader" id="PhoneHeader2" style="display:inline">Phone 2: </div>

        <div class="CustomerPhone" id="CustomerPhone2" dataField="Customer.PrimaryAddress.Phone2" dataType="text" style="display:inline"></div>
        <br>

        <div class="PhoneHeader" id="PhoneHeader3 " style="display:inline">Phone 3: </div>

        <div class="CustomerPhone" id="CustomerPhone3" dataField="Customer.PrimaryAddress.Phone3" dataType="text" style="display:inline"></div>
        <br>

        <div class="PhoneHeader" id="PhoneFax" style="display:inline"> Fax: </div>

        <div class="CustomerPhone" id="CustomerPhoneFax" dataField="Customer.PrimaryAddress.Fax" dataType="text" style="display:inline"></div>
        <br>

        <div class="CustomerEmail">
        <a class="CustomerEmail" id="CustomerEmail"
        dataField="Customer.PrimaryAddress.ContactPerson" dataType="EMailByName" href="about:blank">
        <span dataField="Customer.PrimaryAddress.ContactPerson" dataType="text"></span>
        </a>
        </div>

        </fieldset>
        </td>
    </tr>
</table>
</body>

The DIV elements contains several attributes that identify what the Card Viewer will display. The dataField attribute specifies a property from the query. When you specify a value for the dataField attribute, you must specify the alias of the data permission used by the query, followed by a period and a name of a property. The alias of the data permission used in the query for the Customer Address Card Viewer is Customer. Therefore, the dataField attribute must start with this alias, such as Customer.PrimaryAddress.Fax.

Refer to Finding a Data Permission Alias for information about finding the alias for a data permission.