View Article

Configure a Form with a Tooltip

By Xelence Documentation posted 12-18-2023 15:33

  

Introduction

A tooltip is a control that displays a configured form. When the user triggers the tooltip by rolling over it or clicking it, they will see the mapped form. This gives users the option to view data that otherwise isn't on the current screen without navigating away from that screen.

This example configures a tooltip to display one data table of information.

Prerequisites

  • The entOrder entity must already exist.
  • The lstOrder data table must already be configured in wfmCustomerMaintenance form.
  • The entOrderDetails entity must already exist.
  • One-to-many relationship exists between the entOrder and entOderDetails entities.
Quick Steps
1 Click the Create New File icon, then select New Page
2 Click More, select ToolTip, then click Proceed
3 Roll over the Form Layout and click Choose
4 Enter the details, then click Finish
5 Update the section properties
6 Edit the table
7 Add a Data Table control
8 Select the control information
9 Enter the details, then click Next
10 Select the columns
11 Configure the fields, then click Finish
12 Save the form
13 Open the desired maintenance form
14 Add an Open button
15 Enter the Open button controls, then click OK
16 Save the form

Detailed Steps

Step 1. Click the Create New File icon, then select New Page.

This opens a drop down from which you can select an object to begin with. 



Step 2. Click More, select ToolTip, then click Proceed.



Step 3. Roll over the Form Layout and click Choose.

Choose the layout based on how you want it to look to users. This example uses the default layout.



Step 4. Enter the details, then click Finish.

These are required properties:

  • Entity: The fields available to the tooltip will be based on this entity's attributes.
  • ID: Programmatic ID of the tooltip. It populates automatically, but you can modify it. It will always be prefixed with wfm and suffixed with ToolTip.
  • Folder: Specifies the location for the tooltip. 
  • Portal Name: Starting point or gateway to other resources.
Clicking Finish creates the file. It is ready for further configuration.



Step 5. Update the section properties.

Always update the ID and title of the section so they're meaningful. You can directly change the title in the section itself.



Step 6. Edit the table.

Change the dimensions of the table. A collection goes in one cell, so deleting the rest of the columns makes the form layout easier for you to understand.

This example uses one data table.



Step 7. Add a Data Table control.

Drag the control to the section's cell.



Step 8. Select the control information.

This example uses an entity.



Step 9. Enter the details, then click Next.

This example uses the Order Details collections.



Step 10. Select the columns.

These are the columns whose values you want in the data table.



Step 11. Configure the fields, then click Finish.

You can update the properties or move the fields with the arrow icons to configure their order in the table. Think about what would make sense to users looking at the data table. Click Finish. 


The data table in the cell.



Step 12. 
Save the form.


Step 13.
Open the desired maintenance form.

Open the form you want to display the tooltip on. In this case, that's the Customer Maintenance form. The data table is in the Other Details collapsible control.


Step 14. 
Add an Open button.

Drag and drop the Open button to the desired location. In this case, that's the data table column.



Step 15. Enter the Open button controls, then click OK.

Update the control's ID and Text to make it more meaningful. Update Control Type to Tooltip. The Tooltip Form is wfmOrderTooltip since that's what you want this control to display. 

Map the tooltip you want to use, as well as its parameter. This example uses wfmOrderTooltip and CustomerId.


The ToolTip button control is created in the data table.



Step 16.
Save the form.


Then, run the Preview. Xelence displays the form output. You can test your updated settings.

When you have previewed your form, it should look something like this. You can click the icon (i) next to the column where you configured it to view the tooltip you created.


What are the improvements over S3 Version 6?

The process is identical. Earlier, a separate Tooltip button was used. Now, an open button can be used as a Tooltip button.


This post is part of the Maintenance Form topic. Click here to open the Maintenance Form Overview.


#Xelence

#Forms

0 comments
70 views