Edit mode in the Desktop Studio is used to access unpublished versions of Self Help projects in the current domain.

It is made up of several panes enabling you to:

• Create and organize Self Help projects
• Define resources
• Design procedures
• Define the properties and metadata of components

Notes

• Customers can customize the standard configuration of panes in edit mode in the Desktop Studio.
• Self Help multilingual management enables you to translate the components in each Self Help project into different languages, e.g. translation of component names, procedures, forms, etc.
• Once the version of a Self Help project is published, it can no longer be modified. You can access it in publish mode.
     See Version management

Best Practice

• Move the panes to the spot you want.
• You can also modify the default size of the panes:
  • Explorer pane: 1/3 of the screen width.
  • Conception pane: 2/3 of the screen width and 1/3 of the screen height.
  • Description pane: 2/3 of the screen width and screen height.

• Select View > Reset Views in the menu to return to the default display mode.

Menu access

Desktop Studio > Mode > Edit

Screens description

In the standard configuration, edit mode in the Desktop Studio displays four zones:

• (1) Title bar and menu bar.
• (2) Explorer pane with a view bar at the top that is used to:
  • Manage Self Help project versions and components in the current domain via the tree structure. 
  • Define the properties of components.
  • Access an overview of the current procedure.
• (3) Conception pane with a workspace for designing procedures, HTML content and forms.
• (4) Description pane specific to the object selected in the Conception pane, used to define its content and layout and manage the resources used.

Title bar and menu bar

(1) Title bar: Information on the current Self Help session, i.e. server name, domain, logged-in user.

(2) Menu bar (Note: Certain menu options can also be accessed via a contextual menu specific to components in the Explorer pane).

Description of the menu bar

BarsDescription_FileMenu

EndBarsDescription_FileMenu

BarsDescription_EditMenu

EndBarsDescription_EditMenu

BarsDescription_ProcedureMenu

EndBarsDescription_ProcedureMenu

BarsDescription_ViewMenu

EndBarsDescription_ViewMenu

• The active view is highlighted by an icon displayed on a blue background.
• The Explorer pane includes three views: Explorer, Properties and Overview.
• The Description pane includes one view for each language available for the current Self Help project.  See the description

BarsDescription_ModeMenu

EndBarsDescription_ModeMenu

BarsDescription_HelpMenu

EndBarsDescription_HelpMenu

Explorer pane

The Explorer pane is made up of several zones.

• (1) View bar: Explorer, Properties for projects, procedures and resources, and Overview for procedures only.
• (2) Contextual toolbar specific to the selected view.
• (3) Pane for displaying information specific to the selected view.

Explorer view

This view displays all Self Help projects in the current domain in a tree structure.

To show or hide the view: View > Explorer in the menu

Toolbar

• : Used to display the list of statuses applicable to resources and procedures.
  • The status changes as the workflow progresses: Draft, To be approved, Rework, Approved, Published.
  • The initial status for all content created in a Self Help project is Draft.
  • The status of all content imported from a Self Help project can be kept (i.e. status saved in the archive), or initialized using one of the workflow statuses.
       See the description of the content validation workflow
     
  • Click Show status or Hide status to respectively show or hide the status of the component.
           
    Note: You can also see the status in the Properties view > Info tab.
  • Click one of the statuses in the list to display only the content associated with the status.
     

• : Used to select the language for displaying the names of components in the tree structure.
  • To add a language to the list, select Help > Preferences > Allowed Languages.
     

• : Used to refresh the Conception pane based on the component selected in the tree structure.

• : Used to minimize the Explorer view or to display it in Full screen mode. When minimized, icons will appear in a left sidebar.

Tree structure

It displays all of the components for a given Self Help project, i.e. folders, procedures, resources, etc.
       

• The current version of each Self Help project is indicated between brackets after the name.
  Note: You can access previously published versions in publish mode.

• Click  or double-click the project name to display the tree structure of the Self Help project.
  • To make them easier to manage, you can group components in folders, e.g. Resources, Examples, etc.
  • The icon displayed next to each component indicates the type of component, e.g. procedure, variable, form, etc.
  • The  icon displayed after a procedure name indicates that it can be accessed by end users.
  • Right-click a component to display its contextual menu. A list of the actions authorized will appear, e.g. create, copy, move, import, etc.

• To modify the component name, right-click the name and select Rename.
  • To translate a component name, you should first click  in the toolbar to select the language.  See Self Help multilingual management
    Note: The word <sans nom> displayed next to a component shows that no translation is available. The name between brackets is the one in the Desktop Studio display language.
           

Properties view

This view displays general information and metadata for the component selected in the tree structure of the Explorer pane.

To show or hide the view: View > Properties in the menu

• The elements in the view are specific to the type of component.
     See:
  • Properties view specific to Self Help projects
  • Properties view specific to procedures
  • Properties view specific to resources

Properties view specific to Self Help projects

Toolbar

• : Used to select the language for displaying the content of properties for the Self Help project.
   

Title bar

• Double-click the Self Help project name to modify it.
  • You can also modify the name via the tree structure. Right-click the Self Help project and select Rename.
  • To translate the name, you should click  to select the language.
• The  icon will be displayed if the Self Help project has no name.
   

ExplorerPane_ProjectPropertiesView_Tabs

EndExplorerPane_ProjectPropertiesView_Tabs

Properties view specific to procedures

Toolbar

• : Used to select the language for displaying the content of properties for the procedure.

• : Used to open the procedure in the Conception pane.

• : Used to indicate whether or not users are authorized to run the procedure directly. Click the icon to toggle from one status to another.
   

Title bar

• Double-click the procedure name to modify it.
  • You can also modify the name via the tree structure. Right-click the procedure and select Rename.
  • To translate the name, you should click  to select the language.
• The  icon will be displayed if the procedure has no name.
   

ExplorerPane_ProcedurePropertiesView_Tabs

EndExplorerPane_ProcedurePropertiesView_Tabs

Properties view specific to resources

Toolbar

• : Used to select the language for displaying the content of properties for the resource.

• : Used to open the resource.
  • HTML content, Form, Sub-procedure resources: Content is displayed in the Conception pane.
  • Link resources: The URL is displayed in the Conception pane.
  • Document resources: These are opened using the corresponding program, e.g. Excel, Word, Paint, etc.
     
• Document resources:
  • : Used to select a new file. Its content will automatically be propagated to the places where it is used in the project.
  • : Used to download the file.
     

Title bar

• Double-click the resource name to modify it.
  • You can also modify the name via the tree structure. Right-click the resource and select Rename.
  • To translate the name, you should click  to select the language.
• The  icon will be displayed if the resource has no name.
   

ExplorerPane_ResourcePropertiesView_Tabs

EndExplorerPane_ResourcePropertiesView_Tabs

Overview view

This view displays the flow chart of the procedure selected in the tree structure.

To show or hide the view: View > Overview in the menu

Toolbar

• Zoom: Used to adjust the zoom level for the flow chart displayed.
  • The red outline indicates the area displayed in the Conception pane.
  • Click and drag the outline to view the area you want in the Conception pane.
     

• : Used to adjust the zoom level automatically so that the flow chart is fully displayed in the Conception pane without requiring any scroll bars.

• : Used to adjust the zoom level automatically so that the height of the flow chart is fully displayed without requiring the vertical scroll bar.

• : Used to adjust the zoom level automatically so that the width of the flow chart is fully displayed without requiring the horizontal scroll bar.

Conception pane

The Conception pane is used to design three types of components, i.e. procedures, HTML content resources, and Form resources.

• The pane contains elements that are specific to the type of component you select in the tree structure of the Explorer pane.
     See:
  • Conception pane specific to procedures
  • Conception pane specific to HTML content resources
  • Conception pane specific to Form resources

• When you access the Desktop Studio in edit mode, the component displayed is the one last opened during the previous Self Help session.

• The tab bar at the top of the pane displays the history of components previously opened in the Conception pane, irrespective of the Self Help project.
         
  • Select a tab to display the component in the workspace.
  • Click >> au bout de la barre pour afficher la liste des composants non visibles (le nombre est indiqué derrière l'icône)..

Conception pane specific to procedures

This pane enables you to design the flow chart for the current procedure by configuring each of its steps.
        See How to create a procedure

It is made up of several zones.

• (1) Tab bar of previously opened components
• (2) Toolbar
• (3) Space for designing the procedure

Best Practice

• If the length of a procedure exceeds the width of the screen, select the Overview view in the Explorer pane to display the entire flow chart. You can then use the zoom to adjust the size of the flow chart.

Workspace

It is used to build the decision tree for the current procedure.

• To add a step, right-click the step after which you want to add the new step. Select Insert a Step from the contextual menu.  See the description of different types of steps

• Click one of the steps to select it. A blue outline will appear.
         
  • The toolbars in the Conception and Description panes will be refreshed based on the type of step you select.
  • Define the configuration and layout in the Description pane.
     

• Various icons indicate the type of step.  See the description of different types of steps
  • : Automatic step, not visible to end users.
  • : Sub-procedure.
  • : Marker.
     

• Icons displayed within the outline of a step show the type of resource used, e.g. form, document, etc.
         
  • To associate a resource with a step, click and drag the resource from the tree structure of the Explorer pane to the outline of the relevant step in the Conception pane. The tab specific to the type of resource will automatically be refreshed in the Description pane.
           
  • You can also insert resources directly in the Description pane.
     

• Double-click one of the steps to specify its name.
  • You can hide part of the name by placing the text to be hidden within square brackets  [ ].
  • You can also enter the name in the title bar of the Description pane.
     

•  Used to indicate that errors were detected, e.g. name not specified, error in a condition, etc. Move the cursor over the icon to display its details in a tooltip.
         

Conception pane specific to HTML content resources

This pane enables you to enter text and define the layout for a HTML content page.
Note: Unlike in procedure steps, the Description pane is not used.

It is made up of several zones.

• (1) Tab bar of previously opened components
• (2) Toolbar
• (3) Space for designing HTML content

Workspace

• Enter the text directly in the workspace.

• To add a resource:
  • Click and drag the resource from the tree structure of the Explorer pane to the workspace.
  • Once the resource is added to the workspace, click it to display the configuration options.
           

• Use the toolbars and menus to format the text. See the Content tab in the Description pane

Conception pane specific to Form resources

This pane enables you to design the current form by configuring each of its fields.

It is made up of several zones.

• (1) Tab bar of previously opened components
• (2) Toolbar
• (3) Space for designing the form

Workspace

It is used to build the contents of the current form.

• To add a row or column to the form, click  at the bottom or to the right of the form respectively.
• To add a field, right-click the new row or column and select Add from the contextual menu.

• Click one of the fields to select it. A blue outline will appear.
         
  • The toolbars in the Conception and Description panes will be refreshed based on the type of field you select.
  • Define the configuration and layout in the Description pane.
     

• Double-click the title bar of the field in the Description pane to specify its name.
  • You can hide part of the name by placing the text to be hidden within square brackets  [ ].

•  Used to indicate that errors were detected, e.g. name not specified, error in a condition, etc. Move the cursor over the icon to display its details in a tooltip.
         

Description pane

The Description pane enables you to define the contents of the object you select in the Conception pane, e.g. procedure step or form field.

• The pane contains elements that are specific to the type of object you select in the Conception pane.
     See:
  • Description pane specific to procedure steps
  • Description pane specific to form fields

Description pane specific to procedure steps

This pane enables you to enter the content of the step, define its layout and specify the resources used.
        See How to create a procedure

It is made up of several zones.

• (1) Tab bar displaying the translations of the step's contents
• (2) Title bar
• (3) Tab bar
• (4) Contextual toolbar specific to the current tab
• (5) Space for defining the contents of the current tab

Translation tab bar

• One tab is displayed for each language in the Self Help project whose view you opened by selecting View > Description (language) in the menu.

• When you add a new language to the Self Help project, the contents from the tab of the source language will automatically be copied to the tab of the new language.
  • Use the automatic translation tool to translate the text into the new language.  See the procedure 
  • To add a language to the Self Help project, select Help > Preferences > Allowed Languages in the menu.

• Each language can have its own content, layout and resources.

Title bar

• The icon next to the name of the step indicates the type of step.  See the description of different types of steps

• Double-click the name of the step to modify it.
  • You can hide part of the name by placing the text to be hidden within square brackets  [ ].
  • You can also double-click the step in the Conception pane to modify its name.

• The  icon will be displayed if the step has no name in the selected language.
         

List of tabs

• Each tab has a contextual toolbar.

• The resources associated with each step are displayed in dedicated tabs.
  Note: An icon indicating the type of resource is also displayed in the outline of the step in the Conception pane.

• To add a resource to one of the tabs, click and drag it from the tree structure of the Explorer pane to the relevant tab.
         

Content tab

Editor for defining the HTML content of the object and its layout, e.g. text, tables, links, resources, etc.
Note: This tab appears only for Action, Action with Switch, Branch, Page and Page with Choices steps.

• Icons are grouped in menus based on their functionality.
  • Home menu: Functions for formatting text, e.g. font, bold, underlined, bullets, alignment, etc.
  • Insert menu: Functions for inserting resources, e.g. Self Help project resources, layout zones, horizontal lines, special characters or icons from the icon gallery.
  • Layout menu: Functions for defining the layout of content, e.g. layout templates, image or text layout zones, etc.
       See How to use layout zones
  • View menu: Zoom, automatic translation tool, printing, HTML code editor, keyboard shortcuts.
       See How to use the automatic translation tool

• To insert a resource in the editor:
  • Click and drag the resource from the tree structure of the Explorer pane to the Content tab.
  • Click the name to configure it using the contextual toolbar.

• To define clickable areas for images:
  • Click  in the contextual toolbar of the image.
  • Define the areas that will run an action when users click them, e.g. open a Web page, go to the next step, redirect to a branch of the tree, etc.  -  See the procedure
     

Linked documents tab

List of Document resources used in the current step, e.g. image, audio or video files, PDFs, etc.
Note: This tab appears only for Action, Action with Switch, Page and Page with Choices steps.

Forms tab

List of Form resources used by the current step.
Note: This tab appears only for Action, Action with Switch, Page and Page with Choices steps.

• Display colors:
  • Red: Parameters
  • Blue: Variables
     

Branches tab

List of branches linked to the step.
Note: This tab appears only for Action, Action with Switch, Page and Page with Choices steps.

Connectors tab

List of connectors used by the current step with their parameters and variables.
Note: This tab appears only for Action, Action with Switch, Page and Page with Choices steps.

• Display colors:
  • Green: Connectors attached to the object via the Conception pane
  • Blue: Connectors inserted in the step content via the Description pane
     

Linked procedure tab

List of sub-procedures used by the current step.
Note: This tab appears only for Sub-procedure steps.

Linked Go to steps tab

List of markers inserted in the current step.
Note: This tab appears only for Marker steps.

Report tab

Text inserted in the execution report when users run the current step. This is not visible in the Web page.
The execution report describes the user journey in the procedure, i.e. all of the steps and branches consulted. It can be defined for each step via this tab.

• By default, the report contains the name of the step.
• You can customize the report for the current step using three options:
  • Custom Report: Enter the text to be inserted in the report manually.
  • Step title report: The name of the current step is automatically inserted in the report.
  • None: No text is displayed in the report.

Macro tab

Editor for defining macros.
Note: This tab appears for all steps, except Branch steps.

Description pane specific to form fields

This pane enables you to enter the contents of a field, define its layout, specify display conditions and input and output variables.

It is made up of several zones.

• (1) Tab bar displaying the translations of the field's contents
• (2) Title bar
• (3) Tab bar
• (4) Space for defining the contents of the current tab

List of tabs

Display tab

Type and Validation tab

Input/Output tab

Layout zones

Layout zones enable you to:

• Define the appearance and behavior of the content zones in a visible step depending on the device used to access them, e.g. PC, smartphone, etc. For example, you can define zones to display text or images, or define the size of these zones.
• Display the Self Help project title, procedure title and step title in the page body.

Notes

• A template library is shipped with the standard Self Help project. You can add your own templates.
  *By default, these zones are responsive in design.

Example

Template with three zones: 

• (1): Heading zone
• (2): Image zone
• (3): Text zone

Access

Description pane > Content tab > Layout menu

Description

(1): Used to display layout templates
       

(2): Used to configure the type of zone
       example  H6 heading

Procedure: How to use layout zones

Step 1: Select the layout template

1. Go to the Description pane. Select the Content tab and click Layout in the menu.

2. Click .

3. Click the predefined template you want, e.g. D1, D2, etc.
       

4. In the Headlines section, click the number of headings you want to insert in the page.

• Number of headings = 1 ==> The name of the current step will automatically be inserted in the page contents as heading H1.
        

• Number of headings = 2 ==> The names of the procedure and current step will automatically be inserted in the page contents as headings H1 and H2.
        

• Number of headings = 3 ==> The names of the project, procedure and current step will automatically be inserted in the page contents as headings H1,H2 and H3.
        
   

Step 2 (optional): Customize the template

1. Complete the layout by inserting other zones.

• (1) Insert a zone to the left of, inside, or to the right of the zone where the cursor is currently found.

• (2) Left align or right align the zone.

• (3) Width of the zone.

• (4) Default initial content of the zone, i.e. empty, or displaying the project name, procedure name or step name.

Examples

Heading zones

Display headings
       

Self Help	Example

Text zones

Display text and lists
       

Self Help	Example

Resource zones

Display an image, video and link
       

Self Help	Example