3 Working with the Editors

The OGL Editor

The OGL Editor serves as the primary tool for creating various guides and formatting content.

OGL Editor

Important:

  • To use the OGL Editor, it is necessary for your browser to have the OGL Extension installed.
  • In order to access the OGL Editor, your profile must have Developer Rights/Permissions enabled.

    Learn more about User Management.

Use the OGL editor to create process guides, Smart Tips, messages, and other OGL items. You can access the OGL editor by creating a new guide or from an existing guide. Guide creation is covered later in this document.

Note:

Beginning in OGL 24B Release, the Redwood Design Guide Editor is now the standard guide editor and has replaced the classic (legacy) editor.

To access the OGL Editor (To Create a New Guide):

  1. On the Main Navigation Panel, select Content.

    nav_menu

  2. On the My Content screen, select the create button.

    my_con

    The New Content modal window appears.

    new_con
  3. Select the guide type from the Guide Type dropdown.

    new_con
  4. Enter the desired display name of the new guide.

    new_con2
  5. Enter your application’s URL in the Location URL field.

    new_con3
  6. Select Create.

    The Guide Editor launches.

    launch

    The OGL Editor opens in a new tab. The editor appears as an overlay on your application.

    OGL Editor 1

To access the OGL Editor (To Update an Existing Guide):

  1. Select the Editor icon (icon_edit) on the guide you want to edit.

    edit2

    The OGL Editor opens in a new tab. The editor appears as an overlay on your application.

To learn more about creating guides, kindly access the link "Creating OGL Content."

___________________________________________________________________________________________

The Content Editor

The Content Editor enables you to make simple text edits to guides without the need to access the OGL Editor. OGL administrators can provide you access to the Content Editor only (if required) for reviewing and simple updates. All users can make the following changes to a Guide from the Content Editor:

  1. Edit guide step text.
  2. Translate guide step text in a connected guide.
  3. Add links to a guide step.

Important:

In order to access the Content Editor, your profile must have Editor Rights/Permissions enabled.

Learn more about User Management.

To access the Content Editor:

  1. Select the Content Editor (icon) icon on the guide tile.

    con_edit

    The Content Editor dialog is now displayed.

    con_edit2

To learn more about the Content Editor and its usage, kindly access the links "The Content Editor" and "Editing Guide Content".

separator

Editor Controls

Below is a brief explanation of Editor Controls.

Editor Controls

Sl Element Description Note
1 Title ,aximum of 100 characters  
2 Save & Exit Save changes and close the guide editor.  
3 Cancel & Exit Discard changes and close the guide editor  
4 Content Content tab allows you to add, edit, and configure guide steps and tips Settings and configuration options may vary based on guide type
5 Activation Activation tab allows you to add, edit, and delete guide activation settings See Guide Activation for more information Enabling Guide Activation Settings
6 Settings Settings tab allows you to configure and manage guide-level settings Guide settings can also be accessed from the guide tile in the OGL console
7 Add a step Adds a new step to your guide  
8 Current step Displays the guide step and all associated tips  
9 Add another tip to this step Adds a new tip immediately after the selected step/tip  
10 Step Actions Opens a step-level action menu that allows you to Clone, Move, or Delete the selected step  
11 Tip text Displays an abbreviated preview of the text within the tip  
12 Edit Tip Opens the tip editor to allow text edits, formatting, and other tip-level adjustments  
13 Tip Actions Opens a tip-level action menu that allows you to adjust Tip Settings, Clone, Move, or Delete the selected Tip  
14 Auto capture Automatically take a screen capture of a tip as you select it. Select the checkmark (bottom right) of the screen along with the check box. Use the camera icon to capture screenshots of additional step tips if more than one is added to the step.
15 Element Selector Settings

Opens a menu that allows you to adjust element selection preferences for this guide. Element selector options include:

  1. Element Text
  2. Element Title
  3. Id Attribute

Do not use Element Text or Element Title if capturing elements for multi-language deployment.

Some HTML elements have an id attribute. If they do, they are good for capturing the element because they tend to be constant and are unique in a page. Unfortunately, some applications either do not conform to the uniqueness on a page or may dynamically change the id.

For such applications, of which Oracle Fusion Applications is an example, do not use Id Attribute.

16 Preview Launch a preview of your guide in a new browser tab If you have already opened the preview, select this again to refresh the preview tab and relaunch the guide with your recent changes.
17 Minimize the editor panel Minimizes/hides the guide editor panel Use for maximum screen view.
18 Snap to Right or Left Move the position of the editor to either the right or left side of the browser window.  

separator

Step Control Basics

Step control basics
Element Description Note
Clone Copy step If the step has multiple tips, this copies only the currently selected tip.
Move Up/Down Move the step Up/Down to change the target.  
Delete Step Delete step. If the step has multiple tips, this deletes all tips.
Step Settings Open Step Settings.  
Change Tip Placement Change tip placement (above, below, left, right, and so on) relative to the target.  
Select / Change Tip Target Select to change the target element.  
Edit Tip Make edits to the existing tip.  
Save & Exit Save changes and advance to next step.  

separator

The Full Editor

Full Editor

Full Editor1

Sl No. Element Description Note
1 Text Style Set the alignment for the currently selected paragraph to Left, Center, Right, or Justify.
2 Emphasis Set or unset Bold, Italic, or Underline emphasis on the currently selected text.
3 List Add numbered or bullet list. Right click the list elements to open the list properties dialog, where you may choose numbered list type (Decimal, Latin numerals, Alpha etc.) or bullet list type (Circle, Disc or Square).
4 Indent Increase and decrease text indentation level. Increasing the indentation level of a list item creates a nested effect.
5 Text Align / Justify Set the alignment for the currently selected paragraph to Left, Center, Right, or Justify.
6 Line Height Set the line height.

Full Editor2

Sl No. Element Description Note
1 Advanced Paste Paste rich content as plain text (without styling) or paste from Word and keep the content styles intact.  
2 Undo / Redo Undo changes to the content or redo changes which were previously undone.  
3 Quote Turn selected text into a quote element with its custom styling.  
4 Link / Unlink Turn selected text into a link (anchor) or insert link at the current cursor position. The Link dialog allows you to set the type of the link, its URL, and its target window (open in same/new tab or window)
5 Clear Formats Remove all content styling, such as text color, background color, font size and type etc.
6 Text Direction Set the direction of the currently selected paragraph to Right or Left.
7 Table Add or modify a Table element. The Table Dialog lets you set table properties such as the number of rows and columns, table headers, border, width, and more. You can also right-click a table in the content to open the table properties as well as cell and row level options.

Full Editor3

Sl No. Element Description Note
1 Smiley Insert a Smiley Make someone’s day better!
2 Image Add or modify an image element. The Image dialog allows you to set image properties such as its URL, size, alignment, and whether it is a Captioned Image. You can change the image's size both from the Image dialog or by the in-content drag-to-resize controls. For Captioned Images, the caption can be edited directly in the content.
3 Text / Background Color Set the text and background colors of the currently selected text. The color selection dialog lets you choose a color from a list of preset colors or enter your own custom colors.
4 Launch a guide Insert a link or button to launch a guide from a specific step. Increasing the indentation level of a list item creates a nested effect.
5 Symbol Add a special symbol to the current cursor position. This is especially useful for adding currency symbols, such as Euro or Pound or Yen.
6 Embed Media Add or modify a video or slideshow from an external source. While the main use of this option is to embed videos in guides and messages, supported services also includes audio, photo, and rich content sources.
7 Iridize Session Variable    
  Source View and edit the HTML source of the step's content directly.

separator

Step Settings Details

Step Settings

Sl No. Element Description Note
1 Show Step List Displays the current step/tip being edited and allows you to jump to another step/tip.  
2 Step Settings Opens the Step Settings panel for the current step/tip Step Settings include Display Settings, Activation Settings, and Advanced Settings
3 Hyperlink Select a part of the tip's content and select this button to convert it into a link.  
4 Session Variable Select to add an Iridize Session Variable button. Session Variable buttons can be used to create rich guide flows based on user choices. Selecting a session variable button dynamically sets a variable that can be used in step and branch conditions to control step activation and guide flow. The variable can also be persisted as a user field, which can be used in Guide Activation Conditions.
5 Launch Guide Insert a link or button to launch a guide from a specific step.  
6 Step Comments Displays the number of comments associated with the current step/tip Use the Edit (pencil icon) to add comments to the current step/tip

Note: Place the cursor near the elements and the names of those elements pop up for your reference.

Display Settings

Display Settings Screen # Setting Name Description
Display Settings 1 Highlight / Apply to all

Adds a Border/Overlay/Border+Overlay around the selected element.

  • Border – adds a border around the selected element. Al
  • Overlay – adds an overlay around the selected element. Elements outside the selected element will be visible but inaccessible while the step is active/being displayed.
  • Border and Overlay – Display a border around the highlighted element and mask the rest of the page.

Click Apply to all to update all tips to the current setting.

2 Hide Next button Determines if the Next button should be displayed or not.
3 Change Next button text to:

Allows you to change/update the text of the Next button.

On the first tip of a guide, consider changing the text to something more engaging like “Let’s Go” or “Show Me”. For the last tip, try “That’s It” or “Got it!” or "Done".

4 Hide close button (x)

Determines if the Close (or "X") button is displayed on the tip for end users.

Use this setting when launching a guide for first-time users or for Smart Tips that appear and disappear based on hover actions

5 Show back button

Determines is the Back button is displayed on the tip for end users.

When it is not possible to move back to prior pages in the host application, it is a best practice to hide the Back button. Never have the Back button on the first step of a guide.

6 Show remind later button

Use this setting to display a "Remind Me Later" button in the tip. If selected, end users can choose to temporarily hide the tip and have it reappear at a desired time interval (for example: in 20 minutes, in 1 hour, in 3 hours, Tomorrow, or Next Week).

Show remind later

Note:

The Remind Me Later options shown above will only display in the host application for end users and will not display in the OGL guide editor.
7 Current Step Number

Sets the number in the field that you want to be assigned as the step number for this tip.

When a step has multiple tips, but you want the step count functionality to be meaningful, assign a step number to the tip so that the user can better understand where they are in the process.

8

Hide steps count/progress bar footer

Hide / Show in all steps

Toggles the display of the step counter at the bottom right corner of your tip.

Depending on whether this option is selected or not, the link will display either Hide or Show in all steps. Use the link to update other steps in the guide with the same setting.

Note:

This setting is only available for Process guides and not Smart Tips, Beacons, or Message guides
9 Show Tip Arrow Determines whether the pointed tip arrowhead will be displayed.
10 Tip width

Determines the tip width. Select the number in the text field to edit.

The tip width can be set in pixels (350 = 350px) or as % of the screen area(50%).

11 Tip offset

Determines the offset of the Tooltip relative to the selected element.

Tip Offset

To offset the tooltip

  • UP: Enter a negative number (i.e. -50) in the top offset field
  • DOWN: Enter a positive number (i.e. 50) in the top offsetfield
  • LEFT: Enter a negative number (i.e. -50) in the left offset field
  • RIGHT: Enter a positive number (i.e. 50) in the left offsetfield
12 Tip placement Use this setting to define the position of the tip in relation to the selected element. (i.e. Top/Bottom/Left/Right)
13 Show beacon Enable a flashing beacon associated with the target element to draw the end user's attention.
14 Show help icon

Enable a graphical help icon next to the target element.

  • Show help icon - Without Animation - Shows a static Help Icon (i.e ?)
  • Show help icon - With Animation - Shows an animated Help icon
15 Custom classes

Where applicable you can enter a custom CSS class that will apply to the tooltip. To add multiple custom classes, separate each class with a single whitespace.

Note: This is an advanced feature that requires that the Design Kit to be updated with the required CSS. Refer to the Theme section of the user guide

16 Disable Element Blocks the user from interacting with the highlighted element. Use this option if you want to highlight a button and explain it while making sure the user cannot select it.
17 Change Highlight Element

While the tip will always point to the target element, you can choose to highlight a different element on the screen.

This is commonly used in steps that require two actions. For example, consider a step that says “Enter criteria, then select Search.” The target is the search area, but the highlighted element is the Search button.

separator

Activation Settings

Activation Settings Screen # Element Description Note
Activation Settings 1 Invisible step An invisible step has no visual representation. But it still behaves like a normal step and can wait for any type of user interaction.

Use this setting in conjunction with the 'Immediately' setting for 'Advance when' for cases like the following:

  • Advancing a guide when an element appears.
  • Launching a guide after a user selects a certain button.
  • Launching a guide after a user has started filling out fields on a page.
  • Waiting for a user to perform an action and continue a guide after the action has been completed.
2 Advance when:

Specify what user interaction advances the guide. The most common type is User clicks element.

Advance when

Commonly used events include mouse events (click, double-click), keyboard events (keypress, tab) and page element events (gain/lose focus).

  • Mouse Events
    • click - use this to advance when the user clicks on the selected element
    • double click - use this to advance when the user double clicks on the selected element
    • mouseover - use this to advance when the mouse pointer enters the selected element
    • mouse down - use this to advance when the user starts to click on the selected element. This is most commonly used as a substitute for when the click event cannot be used.

  • Keyboard Events
    • keypress - use this to advance when a character key (or enter) is pressed.
    • enter - used to advance when the user clicks on the Enter key.
    • tab - used to advance when the user clicks on the Tab key.
    • esc - used to advance when the user clicks on the ESC key.
    • backspace - used to advance when the user clicks on Backspace key.
    • space - used to advance when the user clicks on the Space key.

  • Form Events
    • Cursor enters Form Element - use this to advance when the selected element has lost focus.
    • Form Field Content Changes - use this to advance when the user has made a selection a drop down list, clicked on a radio button or a checkbox.
    • Cursor leaves Form Element - use this to advance when the selected element has received focus.
3 Advance conditions Sets additional page conditions for when the user can advance to the next action. For example: Use this if the page has a visible element or if a form field has a selected value.
4 Delay advance by

Sets a timed delay in milliseconds before advancing to the next step. If the step has an 'Advance when' event set, the delay period starts after that event occurs. If there is no 'Advance when' event set, the delay period starts as soon as the target element is found.

Use the list of values to choose additional predefined durations and units (min, hour, etc.).

For example: Use this in conjunction with the User enters test (keypress) setting for Advance when. The next tip will appear automatically x milliseconds after the user has started typing text.

CAUTION: With this setting the guide does not advance to the next step before the delay period is over. Thus, a page refresh or navigation during the delay period will cancel the advancement to the next step.

5 Change Advance Target Use this setting when you want the tip to point to one target element and at the same time wait for the user to interact with another element.
6 Show tip after page refresh This option can prevent tip flashing. Use “Show tip after” as an alternative for “Show tip after page refresh” if you need to prevent a tip from flashing but there is not a page refresh. This can sometime happen when a partial page refresh occurs.
7 Show tip after

Sets a timed delay in milliseconds before showing the current tip.

Use the list of values to choose additional pre-defined durations and units (min, hour, etc.).

Use the edit (pencil) icon to modify defaults.
  Show tip on hover Only show this tip when the user moves their mouse over the target element, help icon, or beacon. Left unselected the tip will always display. Use in conjunction with Smart Tips.
8 Skip if element not found OR conditions not met Tips are rendered as soon as their related element becomes visible. Choose this option to not wait for an element and simply skip to the next step in the guide if the element is not found or additional defined conditions are not met. For example: If you want to create a guide on the Settings page of your application, your first tip should probably be: "Select Settings”. But what if the user launched the guide from the Settings page? The solution: set that first step to be optional.
9 Step Conditions Use this setting to add and edit a list of page conditions for the tip. The tip will only be shown when all the conditions are fulfilled and will be hidden as soon as any of the conditions becomes false.

There are cases where you want to condition the showing of a specific tip in a step on the state of the page the guide is running on. For example, whether a page element, other than the target element of the tip, exists or is visible on the page. Another example can be to only show a tip on a specific page based on the page URL (and maybe skip the step on other pages).

This setting is especially useful in cases where you have multiple tips in a step. It is especially useful for conditional branching of a guide, where the different tips in a step have different conditions and are set to launch different guides (or continue with the current guide). Another common use case is for optional navigation steps, that should only show if the user is not already on the page where the guide is built to run.

  Anti-flicker Conditions Adding page URL condition to a step in order to avoid/control the flickering issue when page is refreshed

separator

Advanced Settings

Advanced Settings # Element Description Note
Advanced Setting 1 Fixed Position When using a splash tip, you can use this setting so that the tip will remain visible even if the user scrolls up or down the page.  
2 Allow changing number of targets Use this setting when attaching a tip to multiple targets, where the number of targets may dynamically change while the tips are showing.  
3 Track target position If the element’s position moves dynamically (fixed positioning), this will ensure that the tip stays on the target element.  
4 No scroll By default, the OGL will scroll the page so that the tip and the highlighted element will be visible. This setting allows you to disable this behavior.  
5 Advanced visibility check

On some applications, OGL might think that an element is visible while it is not. This can happen if the web application uses multiple layers and an element could be hidden behind another one that was added on top of it.

This setting will run some extra checks against the element and options include:

  • Check Center (Default)
  • Check all elements corners
  • Check the element After scrolling
 
6 Set target watch interval to This is used to set the watchdog interval. The behavior is, when the target element disappears the tip should remain visible for the time set in the editor and then hide.  
7 Limit the wait on target to x ms. Guide tips wait indefinitely for the target element to appear. This setting sends an error message if the current target element does not appear within x ms so that we can notify you and fix the problem.  
8 Step Branches This setting allows you to define one or more branches in the step, either jumping to another step in the current guide or launching a different guide.  
9 Next URL Navigates the user to a new page when selecting the next button. This is especially useful if you want to create a site tour.
10 Only display one tooltip When you select an element, the player tries to find a unique identification for it. Sometimes that identification is not strong enough and could result in multiple tips appearing on the screen at once. Deselect this setting to allow for the display of duplicate tips. This could be especially useful if you want identical tips to appear next to each item in a list.
11 Monitor selector If the target element is visible, the tip will show; however, if you selected "Skip if element not found" in the Activation, then deselect the Monitor selector.  
12 Autofocus on tip (Accessibility) Auto focus is used to automatically get the browser focus on tooltips, if not enabled the focus will be on the target element.  

separator

Moving the OGL Editor

image of editor with minimize and move icons labeled

The OGL Editor may cover parts of the application that you need to work with. Using the controls on the OGL Editor, you can move it from left to right side of the window or minimize it entirely.

separator