Studio Desktop de Self Help - Le mode Édition


Le mode Édition du Studio Desktop permet d'accéder aux versions non publiées des projets Self Help rattachés au domaine actif.

Il se compose de plusieurs volets permettant de :

Remarques

  • La configuration standard des volets du mode Édition du Studio Desktop peut être personnalisée par chaque client.
  • Une gestion multilingue est proposée au niveau de l'ensemble des composants de chaque projet Self Help : traduction des libellés des composants, du texte des procédures, des formulaires, ...
  • Les versions publiées des projets Self Help ne peuvent plus être modifiées. Elles sont accessibles via le mode Publication.
        Open url.png voir Gestion des versions

Bonnes pratiques

  • Positionnez les volets suivant vos habitudes de travail.
  • Vous pouvez également modifier la taille des volets par défaut :
    • volet Explorateur : 1/3 de la largeur de la fenêtre ;
    • volet Conception : 2/3 de la largeur de la fenêtre et 1/3 de la hauteur ;
    • volet Description : 2/3 de la largeur et de la hauteur de la fenêtre.
  • Cliquez sur le menu Vue > Réinitialiser les vues pour revenir au mode d'affichage par défaut.
  • Utilisez les zones de mise en page pour uniformiser et mettre en page rapidement la présentation de vos contenus  - Open url.png voir Procédure

Description de l'écran

     Studio mode - Edit.png

Accès : via le menu Mode > Édition

Dans sa configuration standard, le mode Édition du Studio Desktop affiche 4 zones :

  • (1) Barres de titre et de menu ;
  • (2) Volet Explorateur surmonté d'une barre de vues permettant :
    • la gestion des versions et des composants des projets Self Help du domaine actif, via une arborescence ; 
    • la définition des propriétés des composants ;
    • l'accès à une vue d'ensemble graphique de la procédure en cours.
  • (3) Volet Conception : espace de travail dédié à la conception graphique des procédures, du contenu Html et des formulaires ;
  • (4) Volet Description : volet contextuel à l'objet sélectionné dans le volet Conception, permettant la définition de son contenu et sa mise en page, ainsi que la gestion des ressources qu'il utilise.

Barres de titre et de menu

BarsDescription

    Studio - Bars.png

(1) Barre de titre : Informations de la session Self Help en cours (nom du serveur, domaine, utilisateur connecté).

(2) Barre de menu (Note : Certaines options de menu sont également accessibles via un menu contextuel disponible sur les composants du volet Explorateur).

Description de la barre de menu

Menu Fichier : Commandes permettant de :

  • créer un nouvel objet ;
  • importer une archive dans le domaine / exporter un projet Self Help dans une archive ;
  • publier un projet Self Help ;
  • changer l'adresse e-mail et le mot de passe du rédacteur connecté au Studio Desktop ;
  • changer de domaine.
     

Menu Édition : Commandes permettant de :

  • annuler / rétablir des modifications ;
  • copier-coller du texte ;
  • renommer / supprimer un objet.
     

Menu Procédure (Note : Uniquement si une procédure est affichée dans le volet Conception) : Ensemble des commandes permettant d'agir sur les étapes d'une procédure.

Menu Vue : Liste des vues disponibles dans le volet Explorateur et dans le volet Description.

  • Cliquez sur une vue pour l'afficher, ou non.
  • Les vues actives sont mises en évidence par leur icône affichée sur fond bleu.
  • Le volet Explorateur comprend 3 vues : Explorateur, Propriétés, Vue d'ensemble.
  • Le volet Description comprend une vue par langue disponible pour le projet Self Help courant  - Open url.png voir Description
     

Menu Mode : Liste des modes disponibles dans le Studio Desktop. Le mode actif est mis en évidence par son icône affichée sur fond bleu.

  • Mode Édition : Accès à l'ensemble des versions en cours de modification des projets Self Help du domaine actif  - Open url.png voir Description
  • Mode Publication : Accès à l'ensemble des versions publiées des projets Self Help du domaine actif  - Open url.png voir Description
  • Mode Administration (Note : Uniquement pour les administrateurs du domaine et les propriétaires des projets Self Help)  - Open url.png voir Description
     

Menu Aide : Commandes permettant de :

  • accéder à la documentation montrant le fonctionnement du Studio Desktop au travers de pas à pas détaillés  - Open url.png voir Description
  • revenir sur la page d'accueil de Self Help ;
  • définir les préférences :
    • utilisateurs créés par SSO visibles dans la liste des utilisateurs, via l'option Configuration de leadministration (Note : Fonctionnalité accessible uniquement à un administrateur domaine ou système) ;
    • sélection des langues pour la traduction ;
    • sélection des programmes à utiliser pour ouvrir les documents, lorsque différents de ceux utilisés par le système d'exploitation ;
    • configuration par défaut des macros.
  • afficher le journal des erreurs ;
  • consulter la version du serveur et du Studio Desktop.
EndBarsDescription

 

Le volet Explorateur

Le volet Explorateur se compose de plusieurs zones

  • (1) Barre de vues : Explorateur / Propriétés pour un projet, une procédure, une ressource / Vue d'ensemble pour une procédure uniquement
  • (2) Barre d'outils contextuelle à la vue sélectionnée
  • (3) Espace dédié à l'affichage des informations contextuelles à la vue sélectionnée

       Explorer Pane.png

 

Vue Explorateur

Cette vue affiche, via une arborescence, l'ensemble des projets Self Help du domaine actif.

Affichage / Masquage de la vue : menu Vue > Explorateur

       Explorer Pane - Explorer view.png

Barre d'outils

  • Status icon.png : Affiche la liste des statuts applicables aux ressources et aux procédures.
    • Le statut évolue au fur et à mesure du déroulement du workflow : Brouillon, À approuver, À retravailler / Approuvé, Publié.
    • Tous les contenus créés dans un projet Self Help ont initialement le statut Brouillon.
    • Tous les contenus importés depuis un projet Self Help peuvent soit conserver leur statut (statut enregistré dans l'archive), soit être tous initialisés avec l'un des statuts du workflow.
          Open url.png voir Description du workflow de validation des contenus
       
    • Cliquez sur Afficher le statut / Masquer le statut pour afficher, ou non, le statut derrière le composant.
               Content validation workflow - Status display via Explorer pane.png
      Note : Le statut est également visible sur la vue Propriétés > onglet Info.
    • Cliquez sur un statut de la liste pour afficher uniquement les contenus associés à ce statut.
       
  • Select language drop down.png : Sélection de la langue d'affichage des libellés des composants dans l'arborescence.
    • Pour ajouter une langue dans la liste : menu Aide > Préférences > Langues autorisées.
       
  • Synchronize icon.png : Synchronisation de l'affichage du volet Conception avec le composant sélectionné dans l'arborescence.
  • Minimize maximize icon.png : Minimise la vue Explorateur (les icônes sont affichées dans un bandeau latéral gauche) / Affiche la vue en mode Plein écran.

L'arborescence

Pour un projet Self Help donné, elle affiche l'ensemble de ses composants : dossiers, procédures, ressources, ...
         Explorer Pane - Explorer view - Tree.png

  • La version en cours de chaque projet Self Help est indiquée entre parenthèses, après son nom.
    Note : Les versions précédentes publiées sont accessibles via le mode Publication.
  • L'arborescence d'un projet Self Help est ouverte en double-cliquant sur son nom ou via Tree expand icon.png.
    • Pour faciliter leur gestion, les composants peuvent être regroupés dans des dossiers : Ressources, Exemples, ...
    • L'icône affichée devant chaque composant identifie sa nature : procédure, variable, formulaire, ...
    • L'icône User procedure access icon.png affichée derrière le libellé d'une procédure indique que celle-ci est accessible par un utilisateur final.
    • Cliquez droit sur un composant pour ouvrir son menu contextuel : la liste des actions autorisées est affichée (création, copie, déplacement, importation, ...).
  • Pour modifier le libellé d'un composant, cliquez droit sur celui-ci et sélectionnez l'option Renommer.
    • Pour traduire le libellé d'un composant, sélectionnez auparavant la langue de traduction via Select language drop down.png dans la barre d'outils  - Open url.png voir Gestion multilingue
      Note : La mention <sans nom> affichée devant un composant indique que la traduction n'a pas été réalisée. Le libellé affiché entre parenthèses est celui de la langue d'affichage du Studio Desktop.
               Explorer Pane - Explorer view - Component with no translated label.png

Vue Propriétés

Cette vue affiche les informations générales et les métadonnées du composant sélectionné dans l'arborescence du volet Explorateur.

Affichage / Masquage de la vue : menu Vue > Propriétés

Vue Propriétés pour un projet Self Help

     Explorer Pane - Properties view - Project.png

Barre d'outils

  • Select language drop down.png : Sélection de la langue d'affichage du contenu des propriétés du projet Self Help.
     

Barre de titre

  • Double-cliquez sur le nom du projet Self Help pour modifier son libellé.
    • La saisie est également possible via l'arborescence : clic droit sur le projet Self Help > option Renommer.
    • Pour traduire le libellé, sélectionnez la langue via Select language drop down.png.
  • L'icône Warning icon.png est affichée si le projet Self Help n'a pas de titre.
     
ExplorerPane_ProjectPropertiesView_Tabs

Liste des onglets

  • Info : Informations sur le projet Self Help (numéro de la dernière version avec indication de son origine, date de dernière mise à jour, ...). Note : Les informations ne sont pas modifiables.
  • Quota : Représentation graphique de :
    • l'espace disque utilisé par la version du projet Self Help ;
    • l'espace disque utilisé par les autres projets Self Help ;
    • l'espace disque disponible sur le serveur (Note : Sauf si l'espace est illimité pour le serveur).
  • Définition des métadonnées : Liste des métadonnées ajoutées manuellement au projet Self Help, et actives.
    • Les métadonnées actives peuvent être exportées. Elles s'appliquent à l'ensemble des procédures du projet Self Help  - Open url.png voir Comment exporter les métadonnées d'un projet Self Help
    • Pour ajouter une métadonnée, cliquez sur Add metadata icon.png dans la barre d'outils.
    • Une métadonnée peut être désactivée via Activate metadata icon.png. Elle est alors automatiquement déplacée dans l'onglet Métadonnées désactivées.
  • Métadonnées désactivées : Liste des métadonnées ajoutées manuellement au projet Self Help, mais désactivées.
    • Les métadonnées désactivées ne sont pas exportées.
    • Une métadonnée peut être réactivée via Activate metadata icon.png. Elle est alors automatiquement déplacée dans l'onglet Définition des métadonnées.
  • Statistiques : Statistiques d’utilisation de chaque procédure du projet Self Help (nombre d’exécutions lancées et leur durée moyenne, nombre moyen d’étapes dans la procédure, ...)  - Open url.png voir Procédure
EndExplorerPane_ProjectPropertiesView_Tabs

Vue Propriétés pour une procédure

     Explorer Pane - Properties view - Procedure.png

Barre d'outils

  • Select language drop down.png : Sélection de la langue d'affichage du contenu des propriétés de la procédure.
  • Access procedure icon.png No access procedure icon.png : Indique si le lancement direct de la procédure par les utilisateurs et autorisé ou interdit. Cliquez sur l'icône pour basculer d'un statut à l'autre.
     

Barre de titre

  • Double-cliquez sur le nom de la procédure pour modifier son libellé.
    • La saisie est également possible via l'arborescence : clic droit sur la procédure > option Renommer.
    • Pour traduire le libellé, sélectionnez la langue via Select language drop down.png.
  • L'icône Warning icon.png est affichée si la procédure n'a pas de titre.
     
ExplorerPane_ProcedurePropertiesView_Tabs

Liste des onglets

  • Info : Informations sur la procédure (date de création, date de dernière mise à jour, emplacement) et liste des métadonnées générales / spécifiques au type de procédure.
    • Double-cliquez sur une propriété pour saisir son contenu. Note : Les informations générales ne sont pas modifiables.
    • Les métadonnées peuvent être exportées  - Open url.png voir Comment exporter les métadonnées d'un projet Self Help
    • Pour renseigner les paramètres en entrée / sortie de la procédure, cliquez sur Paramètres > Éditer les paramètres.
    • Pour tester la procédure dans un navigateur internet, générez son URL via Lien > Cliquer pour générer un lien.
    • Pour associer une icône à la procédure, cliquez sur Icône > Add icon to procedure icon.png.
  • Utilise : Liste des ressources que la procédure utilise.
    • Cliquez sur <Ouvrir la procédure et afficher les étapes qui utilisent cette ressource> : le volet Conception affiche la procédure et la liste des ressources que la procédure utilise est affichée. Cliquez sur l'une des ressources pour la mettre en évidence sur le volet Conception.
  • Utilisé par : Liste des ressources qui utilisent la procédure.
    • Cliquez sur <Ouvrir la procédure et afficher les étapes qui utilisent cette ressource> : le volet Conception affiche la procédure et la liste des ressources utilisant la procédure est affichée. Cliquez sur l'une des ressources pour la mettre en évidence sur le volet Conception.
  • Statistiques : Statistiques d’utilisation de la procédure (nombre d’exécutions lancées et leur durée moyenne, nombre moyen d’étapes dans la procédure, ...)  - Open url.png voir Procédure
    • Cliquez sur Open procedure execution icon.png dans la barre d'outils pour ouvrir une exécution déterminée de la procédure.
EndExplorerPane_ProcedurePropertiesView_Tabs

Vue Propriétés pour une ressource

     Explorer Pane - Properties view - Resource.png

Barre d'outils

  • Select language drop down.png : Sélection de la langue d'affichage du contenu des propriétés de la ressource.
  • Open object icon.png : Ouverture de la ressource.
    • Ressource de type Contenu Html, Formulaire, Sous-procédure : affichage du contenu dans le volet Conception.
    • Ressource de type Lien : affichage de l'adresse URL dans le volet Conception.
    • Ressource de type Fichier : ouverture avec le programme associé (Excel, Word, Paint, ...).
       
  • Ressource de type Fichier :
    • Replace file icon.png : Sélection d'un nouveau fichier. Automatiquement, son contenu est mis à jour partout où il est utilisé dans le projet.
    • Download file icon.png : Téléchargement du fichier.
       

Barre de titre

  • Double-cliquez sur le nom de la ressource pour modifier son libellé.
    • La saisie est également possible via l'arborescence : clic droit sur la ressource > option Renommer.
    • Pour traduire le libellé, sélectionnez la langue via Select language drop down.png.
  • L'icône Warning icon.png est affichée si la ressource n'a pas de titre.
     
ExplorerPane_ResourcePropertiesView_Tabs

Liste des onglets

  • Info : Informations sur la ressource (date de création, date de dernière mise à jour, emplacement, taille, ...). Note : Les informations ne sont pas modifiables.
  • Ressources liées (Note : Uniquement pour une ressource de type Contenu Html) : Liste des ressources liées à la ressource.
  • Variable (Note : Uniquement pour une ressource de type Formulaire) : Propriétés de la variable.
    • Cliquez sur le lien hypertexte pour afficher les étapes où la variable est utilisée.
  • Utilisée par : Liste des étapes, par procédure, qui utilisent la ressource.
    • Cliquez sur <Ouvrir la procédure et afficher les étapes qui utilisent cette ressource> : la liste des étapes, par procédure, qui utilisent la ressource est affichée. Cliquez sur l'une des étapes pour afficher la procédure dans le volet Conception et mettre en en évidence l'étape.
EndExplorerPane_ResourcePropertiesView_Tabs

 

Vue Vue d'ensemble

Cette vue affiche la représentation graphique globale de la procédure sélectionnée dans l'arborescence.

Best Practice icon.png  Utilisez-la pour visualiser dans leur intégralité de longues procédures nécessitant l'utilisation de l'ascenseur horizontal dans le volet Conception.

Affichage / Masquage de la vue : menu Vue > Vue d'ensemble

       Explorer Pane - Overview view.png

Barre d'outils

  • Zoom : Ajuste la représentation graphique à la valeur du niveau de zoom sélectionné.
    • Le cadre rouge délimite la zone affichée dans le volet Conception.
    • Déplacez celui-ci avec la souris pour visualiser la partie souhaitée sur le volet Conception.
       
  • Overview Page icon.png : Ajuste automatiquement le niveau de zoom afin que la représentation grahique soit affichée dans sa totalité dans le volet Conception (les ascenseurs sont masqués).
  • Overview Height icon.png : Ajuste automatiquement le niveau de zoom à la hauteur de la représentation grahique (l'ascenseur vertical est masqué).
  • Overview Width icon.png : Ajuste automatiquement le niveau de zoom à la largeur de la représentation grahique (l'ascenseur horizontal est masqué).

 

Le volet Conception

Le volet Conception permet la conception de 3 types de composants : procédures, ressources de type Contenu Html, ressources de type Formulaire.

  • À l'ouverture du Studio Desktop en mode Édition, le composant affiché est celui ouvert lors de la dernière session Self Help.
  • La barre d'onglets située en haut du volet affiche l'historique des composants ouverts précédemment dans le volet Conception, quel que soit le projet Self Help.
             Conception Pane - Component tabs.png
    • Cliquez sur un onglet pour afficher le composant sur l'espace de travail.
    • Cliquez sur >> au bout de la barre pour afficher la liste des composants non visibles (le nombre est indiqué derrière l'icône).

Best Practice icon.png  Cliquez sur Synchronize icon.png dans la vue Explorateur pour synchroniser automatiquement l'arborescence à chaque ouverture d'un composant via un onglet.

Volet Conception pour une procédure

Le volet permet la conception graphique de la procédure active en configurant chaque étape qui la compose.
         Open url.png voir Comment créer une procédure

Il se compose de plusieurs zones.

  • (1) Barre d'onglets des composants déjà consultés
  • (2) Barre d'outils
  • (3) Espace dédié à la conception graphique de la procédure

       Conception Pane - Procedure.png

Bonnes pratiques

  • Lorsque la procédure nécessite l'utilisation de l'ascenseur horizontal, affichez la vue Vue d'ensemble du volet Explorateur pour visualiser la représentation graphique dans son intégralité. Utilisez ensuite le zoom pour ajuster la taille du diagramme.

Espace de travail

Il permet de bâtir l'arbre décisionnel de la procédure active.

  • Cliquez sur une étape pour la sélectionner : un cadre bleu est affiché.
             Conception Pane - Procedure - Active step.png
    • Les barres d'outils des 2 volets Conception et Description sont réactualisées en fonction du type d'étape sélectionné.
    • Effectuez la configuration et la mise en page via le volet Description.
       
  • Les icônes affichées à l'intérieur du cadre d'une étape indiquent les types de ressources (formulaire, fichier, ...) qu'elle utilise.
             Conception Pane - Procedure - Step with resources.png
    • Pour associer une ressource à une étape, cliquez-glissez celle-ci depuis l'arborescence du volet Explorateur vers le cadre délimitant l'étape sur le volet Conception : automatiquement l'onglet dédié au type de ressource est mis à jour dans le volet Description.
               Conception Pane - Procedure - Drag and drop resource.png
    • Les ressources peuvent être également être insérées directement dans le volet Description.
       
  • Double-cliquez sur l'étape pour renseigner son nom.
    • Une partie du libellé peut être masquée en plaçant le texte entre les caractères [ ].
    • La saisie est également possible via la barre de titre du volet Description.
       
  • Warning icon.png indique que des anomalies sont détectées (titre non renseigné, erreur dans une condition, ...). Survolez l'icône pour afficher le détail dans une bulle d'aide.
             Conception Pane - Procedure - Step with problem.png

Volet Conception pour une ressource de type Contenu Html

Le volet permet la saisie et la mise en page du contenu du contenu Html.
Note : À la différence des étapes des procédures, le volet Description n'est pas utilisé.

Il se compose de plusieurs zones.

  • (1) Barre d'onglets des composants déjà consultés
  • (2) Barre d'outils
  • (3) Espace dédié à la conception du contenu Html

       Conception Pane - Html content.png

Espace de travail

  • Saisissez le texte directement dans l'espace de travail.
  • Pour ajouter une ressource :
    • Cliquez-glissez celle-ci depuis l'arborescence du volet Explorateur vers l'espace de travail.
    • Une fois la ressource insérée sur l'espace de travail, cliquez dessus pour afficher ses options de configuration.
               Conception Pane - Html content - Resource contextual menu.png
  • Utilisez les barres d'outils et de menus pour formater le texte  - Open url.png voir onglet Contenu du volet Description

Volet Conception pour une ressource de type Formulaire

Le volet permet la conception graphique du formulaire actif en configurant chaque champ qui le compose.

Il se compose de plusieurs zones.

  • (1) Barre d'onglets des composants déjà consultés
  • (2) Barre d'outils
  • (3) Espace dédié à la conception du formulaire

       Conception Pane - Formulaire.png

Espace de travail

Il permet de bâtir le contenu du formulaire actif.

  • Pour ajouter une ligne / colonne au formulaire : clic sur Add icon.png en bas / à droite du formulaire
  • Pour ajouter un champ : clic droit sur la nouvelle ligne / colonne > option Ajouter dans le menu contextuel
  • Cliquez sur un champ pour le sélectionner : un cadre bleu est affiché.
             Conception Pane - Formulaire - Active field.png
    • Les barres d'outils des 2 volets Conception et Description sont réactualisées en fonction du type de champ sélectionné.
    • Effectuez la configuration et la mise en page du champ via le volet Description.
       
  • Double-cliquez sur la barre de titre du champ dans le volet Description pour renseigner son nom.
    • Une partie du libellé peut être masquée en plaçant le texte entre les caractères [ ].
  • Warning icon.png indique que des anomalies sont détectées (titre non renseigné, erreur dans une condition, ...). Survolez l'icône pour afficher le détail dans une bulle d'aide.
             Conception Pane - Formulaire - Field with problem.png

 

Le volet Description

Le volet Description permet de définir le contenu de l'objet sélectionné dans le volet Conception : étape d'une procédure, champ d'un formulaire.

Volet Description pour une étape de procédure

Le volet permet de saisir le contenu de l'étape, d'effectuer sa mise en page et de renseigner les ressources qu'elle utilise.
         Open url.png voir Comment créer une procédure

Il se compose de plusieurs zones.

  • (1) Barre d'onglets des traductions du contenu de l'étape
  • (2) Barre de titre
  • (3) Barre d'onglets
  • (4) Barre d'outils contextuelle à l'onglet actif
  • (5) Espace dédié à la définition du contenu de l'onglet actif

       Description Pane - Procedure.png

 

Barre d'onglets des traductions

       Description Pane - Procedure - Translation tabs.png

  • Un onglet est affiché pour chaque langue du projet Self Help dont la vue est activée, via le menu Vue > Description (langue).
  • Lorsqu'une nouvelle langue est ajoutée au projet Self Help, le contenu de la langue d'origine est automatiquement recopié dans l'onglet de cette nouvelle langue.
    • Utilisez l'outil de traduction automatique pour effectuer la traduction dans cette nouvelle langue  - Open url.png voir Procédure 
    • Pour ajouter une langue au projet Self Help : menu Aide > Préférences > Langues autorisées.
  • Chaque langue peut disposer de son propre contenu, de sa propre mise en page et de ses propres ressources.

Barre de titre

  • Le nom de l'étape peut être modifié en double-cliquant dessus.
    • Une partie du libellé peut être masquée en plaçant le texte entre les caractères [ ].
    • La saisie est également possible en double-cliquant sur l'étape dans le volet Conception.
  • L'icône Warning icon.png est affichée si l'étape n'a pas de titre dans la langue sélectionnée.
             Description Pane - Procedure - Component with no title.png

Liste des onglets

       Description Pane - Procedure - Tabs.png

  • Chaque onglet possède une barre d'outils contextuelle.
  • Les ressources attachées à chaque étape sont affichées dans les onglets dédiés.
    Note : Une icône indiquant la nature de la ressource est également affichée dans le cadre délimitant l'étape sur le volet Conception.

exemple  Étape avec une ressource de type Connecteur et une ressource de type Fichier

  • Les ressources sont affichées dans les onglets Connecteurs et Fichiers.
  • Les icônes associées sont affichées sur la représentation graphique de l'étape Conception Pane - Procedure - Step with resources.png
  • Pour ajouter une ressource dans l'un des onglets, cliquez-glissez celle-ci depuis l'arborescence du volet Explorateur vers l'onglet dédié.
             Description Pane - Procedure - Drag and drop resource.png


Onglet Contenu

Éditeur dédié à la définition et la mise en page du contenu Html de l'objet (texte, tableaux, liens hypertextes, ressources, ...).
Note : Cet onglet est affiché uniquement sur les étapes Action, Action avec condition, Branche, Page, Page de choix.

       Description Pane - Procedure - Content tab.png

  • Les icônes sont regroupées dans des menus, suivant leur fonctionnalité.
    • Menu Accueil : Fonctions de mise en forme du texte (police, gras, souligné, puces, justification, ...).
    • Menu Insertion : Fonctions d'insertion de ressources (ressource issue du projet Self Help, zone de mise en page, ligne horizontale, caractères spéciaux, icône de la bibliothèque).
    • Menu Mise en page : Fonctions de mise en page du contenu (modèles de mise en page, zone de mise en page de type Texte, Image, ...).
          Open url.png voir Comment utiliser les zones de mise en page
    • Menu Affichage : Zoom, traduction automatique, impression, éditeur de code Html, raccourcis clavier.
          Open url.png voir Comment utiliser l'outil de traduction automatique
  • Pour insérer une ressource dans l'éditeur :
    • cliquez-glissez-la depuis l'arborescence du volet Explorateur vers l'onglet Contenu ;
    • cliquez sur son nom pour la configurer via sa barre d'outils contextuelle.
  • Pour définir les zones cliquables des images :
    • cliquez sur Clickable image icon.png dans la barre d'outils contextuelle de l'image ;
    • délimitez les zones permettant d'exécuter une action après un clic : ouverture d'une page web, enchaînement sur l'étape suivante, orientation vers une branche de l'arbre, ...  - Open url.png voir Procédure
       

Onglet Fichiers liés

Liste des ressources de type Fichier utilisées par l'étape courante (fichiers Image, Son, Vidéo, PDF, ...).
Note : Cet onglet est affiché uniquement sur les étapes Action, Action avec condition, Page, Page de choix.

       Description Pane - Procedure - Link Files tab.png
 

Onglet Formulaires

Liste des ressources de type Formulaire utilisées par l'étape courante.
Note : Cet onglet est affiché uniquement sur les étapes Action, Action avec condition, Page, Page de choix.

       Description Pane - Procedure - Forms tab.png

  • Couleurs d'affichage des éléments :
    • rouge : Paramètres
    • bleu : Variables
       

Onglet Branches

Liste des branches reliées à l'étape.
Note : Cet onglet est affiché uniquement sur les étapes Action, Action avec condition, Page, Page de choix.

       Description Pane - Procedure - Branches tab.png

Onglet Connecteurs

Liste des connecteurs utilisés par l'étape courante, avec leurs paramètres et variables.
Note : Cet onglet est affiché uniquement sur les étapes Action, Action avec condition, Page, Page de choix.

       Description Pane - Procedure - Connectors tab.png

  • Couleurs d'affichage :
    • vert : Connecteurs attachés en pièce jointe à l'objet via le volet Conception
    • bleu : Connecteurs insérés dans le contenu de l'étape via le volet Description
       

Onglet Procédures liées

Liste des sous-procédures utilisées par l'étape courante.
Note : Cet onglet est affiché uniquement sur les étapes de type Sous-procédure.

        Description Pane - Procedure - Related procedures tab.png

Onglet Points de reprise liés

Liste des points de reprise insérés dans l'étape courante.
Note : Cet onglet est affiché uniquement sur les étapes de type Point de reprise.

       Description Pane - Procedure - Related resume points tab.png

Onglet Rapport

Texte inséré dans le rapport d'exécution lorsque l'utilisateur réalise l'étape courante, et qui est invisible sur la page web.
Le rapport d'exécution décrit le parcours de l'utilisateur dans la procédure (ensemble des étapes et des branches qu'il a parcourues). Il peut être paramétré étape par étape via cet onglet.

  • Par défaut, le rapport contient le titre de l'étape.
  • Personnalisez le rapport pour l'étape courante via l'une des 3 options :
    • Saisi ci-dessous : Renseignez manuellement le texte à insérer dans le rapport
    • Titre du noeud : Automatiquement, le titre de l'étape courante est inséré dans le rapport
    • Aucun : Aucun texte n'est affiché dans le rapport

Best Practice icon.png  Ajoutez un rapport sur les étapes de la procédure pour lesquelles vous souhaitez connaître le choix de l'utilisateur. 

Onglet Macro

Éditeur dédié à la définition de macros.
Note : Cet onglet est affiché sur toutes les étapes, sauf les étapes Branche.

       Description Pane - Procedure - Macro tab.png

Best Practice icon.png Utilisez des macros pour effectuer des calculs ou faire varier le parcours de l’utilisateur en fonction de ses réponses dans les formulaires.

Volet Description pour un champ de formulaire

Le volet permet de saisir le contenu d'un champ, d'effectuer sa mise en page, de renseigner ses conditions d'affichage et les variables utilisées en entrée / sortie.

Il se compose de plusieurs zones.

  • (1) Barre d'onglets des traductions du contenu du champ
  • (2) Barre de titre
  • (3) Barre d'onglets
  • (4) Espace dédié à la définition du contenu de l'onglet actif

       Description Pane - Formulaire.png

Liste des onglets

       Description Pane - Formulaire - Tabs.png

Onglet Affichage

       Description Pane - Formulaire - Display tab.png
 

Onglet Type et validation

       Description Pane - Formulaire - Type validation tab.png

Onglet Entrées / Sorties

       Description Pane - Formulaire - Input output tab.png

Procédure : Comment ouvrir le Studio Desktop en mode Édition

Via l'authentification du Studio Desktop

AccessDesktopStudio_Authentication

         Open url.png voir Procédure détaillée

Prérequis : Les serveurs Self Help disponibles doivent être configurés au préalable  - Open url.png voir Procédure

1. Installez puis lancez l'exécutable EVSelfHelp Studio.exe sur votre poste de travail. Note : L'exécutable est disponible dans le répertoire d'installation de Self Help.
La boîte d'authentification est affichée.
         Authentication.png

2. Sélectionnez le serveur sur lequel vous souhaitez travailler.

3. Renseignez vos identifiants d'accès.
Note : Faites précéder votre login du nom du domaine sur lequel vous souhaitez travailler.

La page d'accueil de Self Help est affichée.
         Open desktop studio via authentication - Home page Self Help.png

3. Cliquez sur Accéder au studio.

  • Le Studio Desktop est ouvert.
  • Les informations de connexion sont affichées dans la barre de titre (serveur, domaine, utilisateur).

4. Cliquez sur le menu Mode > Édition.

EndAccessDesktopStudio_Authentication

Via le Studio Online

AccessDesktopStudio_OnlineStudio

1. Allez sur le Studio Online en tant que rédacteur ou administrateur domaine.

La page d’accueil du Studio Online est ouverte et affiche la liste des éléments modifiés récemment.

2. Cliquez sur le libellé du composant que vous souhaitez modifier dans le Studio Desktop.

      Open desktop studio from online studio - Select element in online studio.png

  • Le Studio Desktop s’ouvre en mode Édition.
  • Le composant est ouvert en lecture seule.
    Open desktop studio from online studio - Selected element in desktop studio.png

3. Cliquez sur Password close icon.png dans la barre d'outils du volet Conception pour modifier le composant.

Remarques si le Studio Desktop est déjà ouvert

  • Le Studio Desktop est ouvert par le même utilisateur et dans le même domaine que le domaine courant du Studio Online :
    • Le Studio Desktop est automatiquement ouvert en mode Édition.
    • Le composant sélectionné dans le Studio Online est ouvert.
  • Le Studio Desktop est ouvert par un autre utilisateur, ou bien est ouvert par le même utilisateur mais dans un autre domaine que le domaine courant du Studio Online :
    • Un message demande la confirmation de la fermeture de la session active du Studio Desktop.
    • Le Studio Desktop est rouvert en mode Édition avec les paramètres de la session du Studio Online (utilisateur connecté et domaine courant).
EndAccessDesktopStudio_OnlineStudio

Les zones de mise en page

Les zones de mise en page permettent de :

  • définir rapidement l'apparence et le comportement des zones de contenu d'une étape visible suivant le support utilisé (ordinateur, smartphone, ...) : zones pour l'affichage de texte et/ou d'images, dimensions des zones, ... ;
  • rappeler le titre du projet Self Help, de la procédure et de l'étape courante dans le corps de la page.

Remarques

  • Une bibliothèque de modèles est fournie dans le projet standard livré avec Self Help. Vous pouvez y ajouter vos propres modèles.
  • Les zones sont responsives par défaut.

Exemple

Utilisation d'un modèle comportant 3 zones : 

  • (1) : Zone Entête
  • (2) : Zone pour une image
  • (3) : Zone pour le texte

         Layout zones - Example.png

Description

         Layout zones.png

Accès : volet Description > onglet Mise en page

(1) : Affichage des modèles de mise en page
         Layout zones - Predefined templates.png

(2) : Configuration des types de zone
         exemple  zone d'entête H6

         Layout zones - Predefined zones.png

Procédure : Comment utiliser les zones de mise en page

Étape 1 : Sélection du modèle de mise en page

1. Allez sur le volet Description > onglet Mise en page.

2. Cliquez sur Layout zones icon.png.

3. Cliquez sur le modèle prédéfini à utiliser (D1, D2, ...).
         Layout zones - Standard.png

4. Cliquez, dans la zone Headlines, sur le nombre de titres / sous-titres à insérer dans la page.

Attention : Le texte placé entre les caractères [ ] au niveau de chaque titre n'est pas pris en compte comme du texte masqué lorsque la procédure est exécutée.
 

  • Nombre de titres = 1 ==> insère automatiquement le titre de l'étape courante dans la page de contenu, sous forme de titre H1
            Layout zones - One headline.png
  • Nombre de titres = 2 ==> insère automatiquement le titre de la procédure et le titre de l'étape courante dans la page de contenu, sous forme de titres H1 et H2
            Layout zones - Two headlines.png
  • Nombre de titres = 3 ==> insère automatiquement le titre du projet, le titre de la procédure et le titre de l'étape courante dans la page de contenu et le titre de l'étape courante, sous forme de titres H1, H2 et H3
            Layout zones - Three headlines.png
     

Étape 2 (optionnelle) : Personnalisation du modèle

1. Complétez la mise en page du modèle en insérant d'autres zones.

       Layout zones - Customize.png

  • (1) Insertion d'une zone avant, à l'intérieur ou après la zone dans laquelle le curseur est positionné
  • (2) Alignement de la zone à gauche ou à droite
  • (3) Largeur de la zone
  • (4) Contenu initial par défaut de la zone (vide, avec le nom du projet, de la procédure ou de l'étape)

Exemples d'affichage

Zones de titre

Afficher des titres (heading)
         Layout zones - Example - Title zones configuration.png

Self Help Exemple
Layout zones - Example - Title zones in Self Help.png Layout zones - Example - Title zones result.png

Zones de texte

Afficher du texte et une liste à puces
         Layout zones - Example - Text zones configuration.png

Self Help Exemple
Layout zones - Example - Text zones in Self Help.png Layout zones - Example - Text zones result.png

Zones de ressource

Afficher une image, une vidéo et un lien de téléchargement
         Layout zones - Example - Resource zones configuration.png

Self Help Exemple
Layout zones - Example - Resource zones in Self Help.png Layout zones - Example - Resource zones result.png
Tags:
Modifié par Christine Daussac le 2021/08/17 13:17
Créé par Administrator XWiki le 2019/12/10 17:29

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help
•  Service Bots

Powered by XWiki ©, EasyVista 2021