A Frame is a special technique to identify a page in your application so that users can see relevant content on relevant pages. You can add conditions to verify if a Frame is connected to the right page while creating or editing the Frame.
For Apty to connect your application pages to a Frame, enabling you to create content like Validations, Launchers, Tooltips, and Announcements on your application, you can construct Frames using any of the conditions mentioned below.
Anchors
Anchors serve as bookmarks for application pages, allowing Apty to precisely identify your application page by anchoring your page elements to the Frame. Each element on the application page can be utilized as an Anchor Point to ensure accurate page identification.
Example: Suppose you want to show a tooltip to a user only when they navigate to the "Dashboard" page in a web application. You can use anchor points to specify which elements on the Dashboard page should trigger the tooltip.
To create an Anchor Point:
1. On the Create New Frame page in the Apty Studio, enter your Frame Name.
2. Click the anchor icon to add a new Anchor Point.
3. Hover your cursor over the page elements and then click the element(such as the text field, button, page title, etc.) you want to add as the Anchor Point.
Note:
- A green color check mark indicates that an anchor point has been added.
- You can enhance the reliability of page identification by adding multiple Anchor Points to the Frame. In such instances, the webpage will only connect to the Frame when all Anchor Points meet the necessary criteria. Otherwise, adjustments to the Frame will be required to incorporate any page updates.
- Anchor Points is a default condition while creating a new Frame. However, you can select a different condition from the list of available options that appears when you click the ellipsis.
4. Click Save.
You can now use the Frame to create Apty Content like Validations, Launchers, Tooltips, and Announcements on your application.
Custom Script
In complex scenarios for highly dynamic applications like Salesforce, using Anchor Points to create Frames may not be enough. To ensure that users are on the correct page and can seamlessly create content like Validations, Launchers, Tooltips, and Announcements on your application, you can use custom JavaScript to create and connect unique Frames to their relevant pages. For example, utilizing JavaScript with a Boolean expression that, upon execution, links your webpage to a Frame solely when the Boolean value is true and disconnects it when false.
Example: You want to show a tooltip to a user only when they navigate to the "Leads" page of your web application.
To add Custom Script to your Frame:
1. On the Create New Frame page in the Apty Studio, enter your Frame Name.
2. Click the ellipsis and then select Custom Script from the list of options.
3. Enter your JavaScript function in the input field.
4. Click Save.
URI Hash
If you want to identify a page using the hash value of your URL, you can use this condition. Hashes are usually present in Single-page applications developed using AngularJS or ReactJS.
Example: You want to show a tooltip to a user only when they navigate to the "Leads" page in your web application, which uses a URL fragment (the part after #) to identify the page.
To add a URI Hash to your Frame:
1. On the Create New Frame page in the Apty Studio, enter your Frame Name.
2. Click the ellipsis and then select URI Hash from the list of options.
3. Enter your application page's URI Hash value in the input field.
4. Click Save.
Label Comparison
When you choose a label on your application page, Apty's Label Comparison condition will check whether the value it contains is true or false using a variety of relational operators.
Example: You want to show a tooltip to a user only when they navigate to a specific page in your web application.
To use the Label Comparison condition in your Frame:
1. On the Create New Frame page in the Apty Studio, enter your Frame Name.
2. Click the ellipsis and then select Label Comparison from the list of options.
3. Click + Add Condition.
4. Click the Select Label button and then select a label on the application page.
Note:
Including multiple conditions in the Frame can improve the reliability of page identification. In such cases, your webpage will be connected to the Frame only when all conditions are met. If not, adjustments to the Frame may be necessary to accommodate any page changes or remove conditions that are no longer relevant.
5. Select a relational operator from the dropdown.
The operators will define the relationship between the label and the value, depending on which frame will be connected to the relevant page for content creation and display.
| Operator | Description |
| Equal | The selected label exactly matches the value set in the given condition. |
|
Not Equal |
The selected label does not match the value set in the given condition. |
| Regex | The selected label, which contains a string value, matches the pattern specified in the given regular expression condition. |
| Contains |
The selected label, which contains a string value, retains the value specified in the given condition. |
| Empty Value | The selected label does not hold any value. E.g., an empty input field. |
| Non Empty Value | The selected label holds some value that is not specified in the condition. |
6. Enter a value in the input field to match the selected value of the label.
7. Click Save.