3 Working with the Editors

The OGL Editor

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

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.
   

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

   The New Content modal window appears.

   
3. Select the guide type from the Guide Type dropdown.
   
4. Enter the desired display name of the new guide.
   
5. Enter your application’s URL in the Location URL field.
   
6. Select Create.

   The Guide Editor launches.

   

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

   

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

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

   

   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 on the guide tile.

   

   The Content Editor dialog is now displayed.

   

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

Editor Controls

Below is a brief explanation of Editor Controls.

Sl	Element	Description	Note
1	Title	Maximum 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: Element Text Element Title 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.

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.

The Full Editor

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.

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.

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	-
8	Source	View and edit the HTML source of the step's content directly.

Step Settings Details

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
	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). 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. 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.

Activation Settings

Activation Settings Screen	#	Element	Description	Note
	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.	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

Advanced Settings

Advanced Settings	#	Element	Description	Note
	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.

Moving the OGL Editor

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.