Get Started

The quickest way to create a print template is to use one of the preconfigured templates that come with VertiGIS Studio Printing, such as the 8.5 x 11 Landscape template or the A4 Landscape template. The preconfigured templates offer a standard layout that includes the map, overview map, legend, scale bar, map information, and north arrow, with areas for the logo, title, notes, and disclaimer.

This tutorial shows you how to create a print template based on a preconfigured template, configure an application to host the print template, and run the print from the host application.

Before you Begin

VertiGIS Studio Printing can run in two environments—in the cloud or on premises. To do this tutorial, you must have an ArcGIS identity that gives you access to one of these environments.

Quick Steps to Create, Host, and Run a Print Template

The steps to create a print template based on a preconfigured template are as follows:

  1. Create a new print template using a preconfigured template.

  2. Brand the print template.

  3. Preview the print.

  4. Save the print template.

  5. Share the print template.

  6. Host and run the template in a supported host application:

    1. Geocortex Viewer for HTML5
    2. Web AppBuilder

Tutorial - Create, Host, and Run a Print Template

In this tutorial, the vertical bar is used to list Print Designer elements that you access in the given order, for example:

Properties | <control> | <section> | <setting>


Click Properties , select <control> in the drop-down list, expand the <section> area, and configure the <setting> property.

Note that <control> can refer to a particular control or band in the layout or to the template as a whole.

Step 1: Create a New Print Template

  1. Launch VertiGIS Studio Print Designer and click Let's get started. Sign in if you are prompted.

    If you use VertiGIS Studio Printing in the cloud, you can access Print Designer here.

  2. Click the 8.5 x 11 Landscape tile. Alternatively, click New | 8.5 x 11 Landscape.

    Print Designer shows the layout of the 8.5 x 11 Landscape template on the design surface ().

    The Properties panel () shows the properties for the currently selected item, either a control or the template as a whole. Initially, the template as a whole, Print (XtraReport), is selected.

    To select a control, click the control in the layout or select the control in the Properties drop-down list. To select the template as a whole, click the background of the design surface or select the template in the Properties drop-down list.

    In the Properties list, the name is followed by the type of control, for example, in "Map (XRMapPictureBox)", the control is named "Map" and the type is "XRMapPictureBox".

    You can change the name of any layout element using the Properties | <control> | Design | Name setting. The name can contain letters, numbers, and underscores. It cannot contain spaces or special characters.

    Preconfigured template in Print Designer (), with the template's properties shown in the Properties panel ()

  3. To verify the paper size and orientation of the layout as a whole, open Properties | Print (XtraReport) | PageSettings. The Landscape checkbox controls whether the layout is portrait or landscape orientation. The Paper Kind setting controls the height and width of the paper that the print output is intended to be printed on.

    Page settings for the print template

See also...

Create Print Templates

Step 2: Brand the print template

In this step, you will brand the print template by replacing the default logo with your organization's logo.

In addition to the logo, you may want to configure the font, color, and other appearance settings to conform to your corporate style. For more information, see Configure the Look and Feel and the Appearance Properties Common to Most Controls.

The preconfigured templates use Panel controls to organize the template into functional areas. Panels allows you to move and copy related controls as a unit.

The logo is in the TopPanel control with the title.

TopPanel control, containing the logo and title

This tutorial uses a high-resolution image for the logo. The image is larger than the control, so the Sizing setting is used to fit the image to the control.

The size of a control is given in Properties | <control> | Layout | Size. The units are set at the template level, in Properties | Print (XtraReport) | Actions | Measure Units.

  1. In the layout, click the logo's control to select it.

    This also selects the control in the Properties panel. The control is called OrganizationLogo.

    Default logo selected in the layout

  2. Specify the logo file's location:

    • Workstation: If the image is on your workstation, you can select the file in the file system. This embeds a copy of the image in the print template. The preconfigured templates use this method.

      In Properties | OrganizationLogo | Actions, click the icon in the setting where the default image is configured. Browse to your logo file, select it, and click Open.

      Setting to select an image on your workstation

    • Web Server: If the image is served by a web server, you can specify the image's HTTP or HTTPS URL. In on-premises Printing, you can specify the image's file path on the server instead of the URL.

      Cloud Printing does not support file paths.

      In Properties | OrganizationLogo | Actions, type or paste the logo's URL in the top Image URL box.

      Setting to specify an image by its URL

    • The custom logo replaces the default logo in the OrganizationLogo control. If the logo is larger than the control, only part of the logo is visible.

      Custom, high-resolution logo in the OrganizationLogo control

  3. In Properties | OrganizationLogo | Actions | Sizing, select Squeeze from the drop-down list.

    High-resolution logo squeezed to fit the OrganizationLogo control

  4. Drag the middle, right handle of the OrganizationLogo control towards the left to adjust the width of the control.

    Alternatively, you can use the settings in Properties | OrganizationLogo | Layout | Size to adjust the size of the control.

    Handle to drag to resize the width of the control

    Control resized to fit the logo's width

  5. Move the LogoSeparator control to the left.

    To move a control, you can either drag the control or select the control and use your keyboard's arrow keys to move it.

    Alternatively, modify the Properties | LogoSeparator | Layout | Location settings.

    LogoSeparator moved to the left

  6. Increase the size of the MapTitle control to fill the available space.

    MapTitle control resized to fit the available space

See also...

Configure the Picture Box Control

Step 3: Preview the print

Print Designer has a Preview function for running prints. The Preview function allows you to verify a print template's layout while you are designing it.

The preview shows a placeholder map and overview map. To produce a print using your own map, you must run the print from a host application.

To preview a print, your browser must allow pop-ups from (cloud Printing) or from your domain (on-premises Printing).

  1. Click Preview .

    The preconfigured templates have two controls that use parameters in their configuration. A parameter is a placeholder for print content that gets its value when the print is generated. You can use a parameter in any Label control.

    The controls in the preconfigured templates, MapTitle and NotesDesc, use parameters called Title and Notes respectively. The Preview prompts you to enter values for Title and Notes.

    Prompt to enter values for the Title and Notes parameters

  2. Type in values for Title and Notes, if you want.

    Default value for the Title parameter replaced with a custom title

  3. Click Run.

    The PDF will open in a new browser tab.

    Print preview, showing the placeholder map

See also...

Configure Parameters

Step 4: Save the print template

  1. Press Ctrl+S or click File | Save As.

  2. Enter a name for the print template.

  3. Click Save.

    When you save a print template for the first time, an item is created for the template in your ArcGIS content. The item's URL is given in Print Designer's Info panel. To open the item in ArcGIS, click the View hyperlink. The Info panel also provides an area to enter a description of the template.

    Info panel, showing the URL for the print template's ArcGIS item

Step 5: Share the print template

When you first save a print template, only you have access to the template. You can share print templates with groups that you belong to, with your entire organization, or with everyone (including the public). In this tutorial, for simplicity, you will share the template with everyone.

Normally, you have to share the host app in addition to the print template. You do not need to share the host app in the context of this tutorial because only you will run the app.

To share a print template, you share the print item in ArcGIS. In some Web AppBuilder scenarios, you also have to share the VertiGIS Studio Printing widget that runs the print.

Normally, we do not recommend sharing print templates with everyone unless the application is public and you want to allow anyone to run the print.

  1. Sign in to your ArcGIS account.

    You can open your ArcGIS account from Print Designer by clicking Info | View.

  2. Share the print item:

    1. On the print item's details page, click Share.

    2. Select the Everyone (public) checkbox.

    3. Click OK.

  3. If you are running Web AppBuilder in Portal for ArcGIS 10.6+, share the widget item.

    This allows anonymous users to run the print.

    1. Go to your Content area.

    2. Open the widget item's details.

    3. Click Share.

    4. Select the Everyone (public) checkbox.

    5. Click OK.

Step 6a: Host and run the template in a VertiGIS Studio HTML5 Viewer

Host the Print Template

To configure an HTML5 viewer to host a print template, you add the template to the Essentials site.

  1. Edit the site in Geocortex Essentials Manager.

  2. Click Print Templates in the sidebar.

  3. Click Add Print Template.

    The Create Print Template Wizard opens.

  4. Type a display name and optional description for the template.

    The HTML5 Viewer's Print function uses the display name to list the available templates for the user.

    Example display name and description for a print template

  5. Click Next.

  6. Make sure A print template defined by an ArcGIS item is selected.

  7. Click Next.

  8. Type some text to search for the print template, for example, a word in the template's name.

    Alternatively, copy the template's URL from the Info panel in Print Designer and paste it in the search box.

    Example ArcGIS print items

  9. Locate the print template and select it.

    Print item selected

  10. Click Finish.

    The template is added to the list of print templates. Its type is ArcGIS Item.

  11. Click Save Site.

    The viewer now hosts the print template. Users can run the print from the viewer.

You can configure map scales and resolutions for users to select by editing the template.

Run the print

Users run prints using the HTML5 Viewer's Print tool, which generates printable maps based on VertiGIS Studio print templates.

  1. Launch the viewer.

  2. Click the Print tool in the toolbar to open the Print Map panel.

    In the Desktop and Tablet interfaces, the Print tool displays an overlay on the map. The overlay represents the area to print.

    Geocortex Viewer for HTML5 Print Map panel () and overlay ()

  3. Configure the settings in the panel:

    • Select Layout: Select the print template.

    • Output Format: The output format is PDF.

    • Grid, Map Scale, Notes: For this tutorial, use the default values.

    • Title: For this tutorial, enter the following title: Geocortex Viewer for HTML5 Printout

  4. Select the area to print:

    • Desktop or Tablet Interface: In the Desktop or Tablet interface, adjust the position of the map under the overlay to indicate the area to print. Clearing the Lock print preview with map checkbox allows the map to move independently of the overlay.

    • Handheld Interface: In the handheld interface, pan and zoom the map to center the area of interest in the map viewport and then click Center print here.

  5. Click Print to submit the print request to VertiGIS Studio Printing.

  6. When the Print Map panel indicates that the print is ready, click Open File to view the PDF.

    If you have selected features or drawn markup on the map, the selection and markup will show in the print output.

    Print generated from a template hosted by a Geocortex HTML5 viewer

Step 6b: Host and run the template in a Web AppBuilder app

Host the print template

Before a Web AppBuilder app can host a print template, you must register the VertiGIS Studio Printing custom widgets. The custom widgets allow you to host and run print templates from Web AppBuilder apps. See Prepare the Printing Widgets for Web AppBuilder for information.

To configure a Web AppBuilder app to host print templates, you add the VertiGIS Studio Printing widget to the app and select the templates that you want the widget to run.

To configure a Web AppBuilder app to host the print template:

  1. In Web AppBuilder, configure the app that will host the print template.

  2. Add the Printing widget:

    1. Click Widget to open the Widget panel.

      Open the Widget panel

    2. Click Set the widgets in this controller.

    3. Click the icon to add widgets.

      Add widgets

    4. Select the Printing widget and click OK.

      The Configure Printing dialog box opens.

      Printing widget

  3. Configure the Printing widget:

    1. Click Add Print, select the print template to host, and click OK.

      Print template added to the Printing widget

    2. Enter a name and description for the template:

      The name and description appear in the app's Printing panel.

      • In the Name box, type the following name for the print template: Get Started

      • In the Description box, type the following description for the print template: Run the Get Started tutorial's print template

      Name and description to appear in Web AppBuilder's Printing panel

    3. Click OK.

  4. Save the app.

Run the Print

  1. Launch the app.

  2. Pan and zoom the map to show the area that you want to print.

    Map panned and zoomed to the area of interest

  3. Click the Printing widget to open the Printing panel.

    Printing panel with one print template

  4. Click the template.

    The panel displays the input parameters and settings.

    Input parameters and settings

  5. Configure the inputs and settings:

    • Title: For this tutorial, enter the following title: Web AppBuilder Printout

    • Notes, Map Scale, Resolution, Grid: For this tutorial, use the default values.

  6. Click Run.

  7. When the Printing panel indicates that the print is ready, click Download to view the PDF.

    Print generated from a template hosted by a Web AppBuilder app