Creating templates to display query data

Do the following to create the query:

1. Go to RiSE > Intelligent Query Architect > New > Query.
2. Name the query, then click the Sources tab.
3. Create the query. The properties selected on the Display tab are the only properties available through the Template tab.
4. Click the Template tab.
5. Use the Insert data source field drop-down to begin adding the query display properties necessary in the template.



6. Use the HTML tab to insert custom CSS or HTML to format the template data.

Note: The Template tab accepts bootstrap card containers. See Cards Bootstrap for more information.

7. When the template data is ready, Save the query.

Note: See Displaying profile pictures in a query Template for details.

Do the following to display the query template:

1. Create a new content record or open an existing content record (RiSE > Page Builder > Manage content).
2. Select Add content, then open the Utility folder.
3. Add the Query Template Display content item to the content record.
4. Configure the content item:
• Limit users who can view data for other contacts - (enabled by default) If this option is enabled, only authorized users can view information for contacts other than themselves. This prevents other users from changing the ID in the URL to access another contact's data. Authorized users include staff and Company Administrators for a group that the contact belongs to. Disable this option to allow all users to view information for other contacts, such as for a public profile. If this option is disabled, the system security settings determine whether a user must be logged in to view information for other contacts.
• Source query – Click select and browse to the IQA query. The query must have content defined in the Template tab of the query definition.
• Display in cards – Displays the query content in a container that resembles a card. See the Cards Bootstrap documentation for more information about cards. When this option is not enabled, the query content is displayed in a simple list.
• Display in columns - Displays the information in multiple columns instead of a single column.
  • Number of columns – Select the number of card columns to display on each page.
• Rows per page – Enter the number of data rows to display on each page.

Note: Results are limited to a maximum of 120. If the column-by-row calculation is greater than 120, the Rows per page value is automatically modified to a value that returns 120 or less.

• Pager position – The pager is a set of controls that moves the pages of results either forward or backward. Select where the pager is located:
  • Left - Select to show paging controls on the bottom left of the page.
  • Center - Select to show paging controls in the bottom center of the page.
  • Right - Select to show paging controls at the bottom right of the page.
• Use simple pager - Enable to hide the page numbers.
• Hide when there are no results – Enable this option to hide the content item when the query specified returns no results.
• No results tab – Message displayed when the query specified returns no results. If Hide when there are no results is enabled, this tab is disabled.
• Header tab – Messaged displayed above the query results.
• Footer tab – Messaged displayed below the query results.
5. Click OK, then Save & Publish the content record.

This example details how to display commerce product images in the query Template:

1. Go to RiSE > Intelligent Query Architect > New > Query.
2. Name the query Product Thumbnails.
3. (Sources tab) From the Add source area on the right-side, select Products.



4. (Display tab) Scroll down to the bottom of the query window:
   1. Enter the following information in the Custom section:
      • SQL Expression: REPLACE(vBoCsProduct.THUMBNAIL_URL,'~','')
      • Alias: Image
   2. Click Add.
5. (Display tab) Continue adding the desired display columns.



6. Click Save.
7. Click the Template tab.
8. Insert the Image data source.



9. Click the HTML tab.
10. Update the data source to the following: <img src= "{#query.Image}">
11. Click back to the Design tab. The image property will look like a broken image.
12. Continue adding data sources to the Template tab.



13. Save the template. Add the query to content using the Query Template Display content item. See Displaying the query template.

To display user profile pictures, you must use the ContactProfileImage business object and one of the properties with “File Path” in the name.

Do the following to display profile pictures using the query Template tab:

1. From the query Display tab, make sure you have one of the following ContactProfileImage properties selected:
   • Thumbnail File Path
   • Thumbnail Large File Path
   • Image File Path
2. From the Template tab, insert the image data source:



3. Click the HTML tab.
4. Update the data source so that the syntax reads like the following: <img src=" {#query.ThumbnailLargeFilePath}">



5. Click back to the Design tab. The image property will look like a broken image:



6. Continue adding data sources to the Template tab.



7. Save the template. Add the query to content using the Query Template Display content item. See Displaying the query template.

Example: The staff users need a quick view of the members’ information, such as ID, name, company, email, phone numbers, and the last-updated date. In this view, staff users also need an indicator for those who have not had any data updated on their profiles in the last year.

Do the following:

1. Create a query using the NetContactData and ContactProfileImage business objects.
2. Add the following properties to the Display tab:
   • Image File Path
   • Full Name
   • ID
   • Title
   • Home Phone
   • Mobile Phone
   • Work Phone
   • Company
   • Last Updated
   • Is Company
   • Email
3. From the Template tab, add the following conditional statement:
Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="container-fluid">
                                <h2 class="display-5 fw-bold">{#query.ID} - {#query.FullName}</h2>
                                <div class="mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                <div class="col-md-4">
                                <img src="{#query.ImageFilePath}" alt="" class="img-fluid rounded-start">
                                </div>
                                <div class="col-md-8">
                                <div class="card-body">
                                {if ISFALSE(#query.IsCompany)}<h5 class="card-title">{#query.Company}</h5>{/endif}
                                {if ISNOTNULLOREMPTY(#query.Title)}<h6 class="card-subtitle mb-2 text-muted">{#query.Title}</h6>
                                {/endif}
                                <p class="card-text">
                                {if #query.Email NEQ ''}{#query.Email}</br>{/endif}
                                {if LENGTH(#query.HomePhone) GT 0}Home: {#query.HomePhone}</br>{/endif}
                                {if LENGTH(#query.WorkPhone) GT 0}Work: {#query.WorkPhone}</br>{/endif}
                                {if LENGTH(#query.MobilePhone) GT 0}Mobile: {#query.MobilePhone}</br>{/endif}
                                </p>
                                <p class="card-text">
                                <small class="text-muted">Last updated {#query.LastUpdated}</small>
                                {if (DAYSBETWEEN(#query.LastUpdated, Now) GT 365)} {/endif}
                                </p>
                                </div>
                                </div>
                                </div>
                                </div>
                                <a href="Party.aspx?ID={#query.ID}" class="btn btn-primary btn-lg" role="button" aria-disabled="true">Full Profile</a>
                                </div>
                            </div>

4. Save the query.
5. Add the Query Template Display content item to a content record. See Displaying the query template.