ProDon:Back office 5.0.3

Back office 5.0.3

Printable version

---

CAUTION: This document is currently being revised, it may be possible that some parts are missing or outdated

ATTENTION : Ce document est présentement en rédaction/révision, il est possible que certaines parties soient manquantes ou désuètes.

CAUTION: This funtion is only available from the version 5.0.3 of ProDon.

ATTENTION : Cette fonctionnalité est disponible seulement à partir de la version 5.0.3 de ProDon.

Introduction

The back office is linked to the Online Donation module. It allows the management of all graphic elements of the homepage and of the forms.This is where one will be able to edit the font, the colors and the pictures that will appear on the IMakeAnOnlineDonation of the organization.

Le back-office est relié au module Dons en ligne. Il permet de gérer tous les éléments graphiques de la page d'accueil et des formulaires. C'est à partir de cet endroit qu'il sera possible modifier les polices de caractères, les couleurs ainsi que les images apparaissant sur le Jedonneenligne de l'organisation.

Creating a LogiZone account/Création d'un compte LogiZone

A LogiZone account is a profile which one the access given will allow to login to the back office.

Un compte LogiZone est un profil qui une fois les accès attribués permettra d'accéder au back-office. To create a LogiZone account, go to the back office. Pour faire la création d'un compte LogiZone, il faut accéder au back-office.

To do so, go to the "Web form management". Pour ce faire, il faut se rendre dans la « Gestion des formulaires Web ».

Click on the "Configuration" menu, then select the "File:Bouton formulaire web.png Web Forms". Cliquer sur le menu « Configuration », puis choisir « File:Bouton formulaire web.png Formulaires Web ».

Fichier:ProDon5 BackOffice_5.0.3 001.png

After clicking on "Web Forms", this window will open. Après avoir cliqué sur « File:Bouton formulaire web.png Formulaires Web », la fenêtre suivante s'ouvre.

Fichier:ProDon5 BackOffice_5.0.3 002.png

Once this window is opened, select the button Fichier:Bouton_aller_sur_le_site_production.png and select "Display the theme configuration page". Une fois la fenêtre ouverte, sélectionner le bouton Fichier:Bouton_aller_sur_le_site_production.pnget ensuite sélectionner « Display the theme configuration page ».

Fichier:ProDon5 BackOffice_5.0.3 003.png

Once on the page to the back office, the user will have to create their LogiZone account, if they do not have one. Rendu sur la page pour accéder au back-office, il faut faire la création de son compte LogiZone, si inexistant.
Fichier:ProDon5 BackOffice_5.0.3 004.png
A : Allows the user to login an active LogiZone by entering the user name or the email address. Permet d'entrer dans une LogiZone active en entrant le nom d'utilisateur ou l'adresse courriel.	B : Enter the password of the existing LogiZone. Entrer le mot de passe de la LogiZone existante.
C : Use this link to change the password of the existing LogiZone. Utiliser le lien pour permettre d'attribuer un nouveau mot de passe à la LogiZone existante.	D : Allows the creation of a new LogiZone account. Permet de créer un nouveau compte LogiZone.
E : Help to get more information about the LogiZone account. Permet d'en savoir plus sur le compte LogiZone.

Back office accesses / Accès au back-office

To access the back office, one must have a LogiZone account first. Once the LogiZone account created, go to ProDon to give the access to the back office to this account.

Pour être en mesure d'accéder au back-office, il faut au préalable avoir un compte LogiZone. Une fois le compte LogiZone créé, il faut donner les accès à ce compte au back-office.

--From ProDon, to give the acces to the LogiZone account which will be able to edit the back office. À partir de ProDon, donner accès au compte LogiZone qui pourra apporter des modifications au back-office.

To do so, one must go to the "Web form management". Pour ce faire, il faut se rendre dans la « Gestion des formulaires Web ».

Click on the "Configuration" menu, then select "Web Forms". Cliquer sur le menu « Configuration », puis choisir « File:Bouton formulaire web.png Formulaires Web ».

Fichier:ProDon5 BackOffice_5.0.3 001.png

Après avoir cliqué sur « File:Bouton formulaire web.png Formulaires Web », la fenêtre suivante s'ouvre.

Fichier:ProDon5_BackOffice_5.0.3_002.png

Alors, il faudra appuyer sur ce bouton Fichier:Bouton_configurer_votre_site_Web.png.

In this window, go to the "Access IMakeAnOnlineDonation" tab and click on the + to add a user. Dans cette fenêtre, il faut aller sur l'onglet Accès JeDonneEnLigne et cliquer sur le pour ajouter un utilisateur

Fichier:ProDon5 BackOffice_5.0.3 006.png

NOTE: From the bottom of this window, it is possible to create an encryption key. Il is not necessary to have one. À partir du bas de cette fenêtre, il est possible de créer une clé de cryptage. Il n'est pas nécessaire d'en avoir une.

Then, this window will open: Ensuite, cette fenêtre s'ouvre:
Fichier:ProDon5 BackOffice_5.0.3 007.png
A: In this box, enter the email that will be used to access the LogiZone. Dans cette case, il faut entrer le courriel qui est utilisé dans la LogiZone.	B: Usually, enter the name of the person who will use this email to access the LogiZone. Généralement, il faut inscrire le nom de la personne qui utilisera ce courriel pour accéder à la LogiZone.
C: The checkbox "Back office" is used to grant the access to let the user work on the back office. La case à cocher « Back-office » sert à donner les accès à l'utilisateur pour utiliser le back-office.	D: The checkbox "Online donation list" is used to grant the access to let the user see the list of online donation. La case à cocher « Liste des dons en ligne » sert à donner les accès à l'utilisateur pour voir les formulaires.
E: When there is an encryption key, this box give the access to the user to do integration on demand. Lorsqu'il y a une clé de cryptage, cette case donne l'accès à l'utilisateur de faire des intégrations sur demande.	F: Write the user's password for integration in this box. Il faut écrire le mot de passe de l'utilisateur dans cette case.

The email linked to the LogiZone account will appear here. Le courriel affecté au compte LogiZone apparaitra ici.

Fichier:ProDon5 BackOffice_5.0.3 008.png

Create themes in the back office / Créer des thèmes dans le back-office

Then, redo the steps of the LogiZone creation, but in place of creating a new one, connect to the session.

Ensuite, refaire les étapes de la création de LogiZone, mais au lieu d'en créer une nouvelle, il faut se connecter sur la session.

Normally, the user will get to this window: Normalement, l'utilisateur arrivera à cette fenêtre:
Fichier:ProDon5 BackOffice_5.0.3 009.png
A: Please be sure to be in the right section. Il faut s'assurer d'être dans la bonne section.	B: Click on this button to create a new theme. Il faut cliquer sur ce bouton pour créer un nouveau thème.

"Option" tab / L'onglet « Option »

Then, this window opens: Alors, cette fenêtre s'ouvre:
Fichier:ProDon5 BackOffice_5.0.3 010.png
A: This section allows the choice of the theme type that will be created. The possible choices are: create a theme for the homepage and the forms, for the homepage only or for the forms only. Cette section permet de choisir le type de thème qui sera créé. Les choix possibles sont: créer un thème pour la page d'accueil et les formulaires, pour la page d'accueil seulement ou pour les formulaires seulement.	B: This sections allows the naming of the theme. Cette section permet de définir le nom du thème.
C: This checkbox allows this theme to be applied by default. Cette case à cocher permet d'appliquer ce thème par défaut.	D: This checkbox allows the display of the header only on the first page of the form. Cette case à cocher permet d'afficher l'image d'entête seulement sur la première page du formulaire.
E: This checkbox allows the display the title only on the first page of the form. Cette case à cocher permet d'afficher le titre seulement sur la première page du formulaire.	F: In all windows, this button return the user to the overview of everything in this section. For example, when a user is in the themes, this button will return to the overview of all themes of the back office. Dans toutes les fenêtres, ce bouton retourne à la vue d'ensemble de tout ce qu'il y a dans cette section. Par exemple, lorsque l'utilisateur est dans les thèmes, ce bouton le ramène à la vue d'ensemble de tous les thèmes du back-office. Contrairement aux boutons du fureteur, il ne permet pas de revenir à la page précédente.
G: This button allows to save the edits. Furthermore, everytime a change is detected in a section, when the user goes to another section, the back office ask to save the changes. Évidemment, ce bouton permet de sauvegarder les modifications. De plus, dès qu'un changement est détecté dans une section, lorsque l'utilisateur change de section, le back-office demande une sauvegarde.

"Palette" tab / L'onglet « Palette »

The "Palette" tab allows the definition of the colors that will be used in the other tabs of the back office. Usually, the user configure the organization's colors. L'onglet « Palette » permet de définir toutes les couleurs qui seront utilisées dans les autres onglets du back-office. Généralement, les utilisateurs y configurent les couleurs de leur organisation.
Fichier:ProDon5 BackOffice_5.0.3 011.png
A: To get the most precise colors, the back office system use the rgba. The numbers be between 0 and 255. The first number is the amount of red, the second is the amount of green, the third is the amount of blue and the last one is the opacity (alpha). The more this number is close to 1.0, the more the color will be opaque, the more it is near to 0.0, the more this color will be transparent. Pour la précision des couleurs, le système du back-office utilise la fonction rvba (rgba en anglais). Les nombres doivent être situés entre 0 et 255. Le premier nombre contrôle la quantité de rouge, le second la quantité de vert, le troisième la quantité de bleu et le dernier chiffre contrôle la transparence (alpha). Plus ce chiffre est près de 1,0, plus cette couleur sera opaque, plus il est près de 0,0, plus cette couleur sera transparente.	B: If the user does not have the numbers for their colors, it is possible to use this tool. The user will only have to click on the bar and the tool will open. Si l'utilisateur ne détient pas les nombres pour ses couleurs, il est possible de choisir ses couleurs par cet outil.

The "Fonts" tab / L'onglet « Polices »

The "Fonts" tab allows the definition of the standard font and the font color that will be used in the forms created by the back office. Usually, the user configure the general font of their organization with a color easily readable in the organization's colors. L'onglet « Polices » permet de définir la police standard et la couleur de la police qui seront utilisées dans les formulaires créés par le back-office. Généralement, les utilisateurs y configurent la police générale de leur organisation avec une couleur qui se lit bien à travers les couleurs de l'organisation.
Fichier:ProDon5 BackOffice_5.0.3 012.png
A: To open the menu to configure the font, click on the box of the line that must be edited. Pour ouvrir le menu pour configurer la police, il faut cliquer sur la case de la ligne qu'il faut ajuster.
Fichier:ProDon5 BackOffice_5.0.3 013.png
B: The "Font" option allows the setting of the text display. L'option « Police » permet de choisir l'apparence du texte.	C: The "Text color" option allows the user to choose the writing color in the forms and the homepage. L'option « Couleur du texte » permet de choisir la couleur des écritures dans les formulaires et la page d'accueil.
D: The "Palette" option allows the selection of the text color among the ones set in the last tab. It is used in several section of the back office. L'option « Palette » permet de choisir la couleur du texte parmi les couleurs définies dans l'onglet précédent. Elle est utilisée dans plusieurs sections du Back-office.	E: The "Style" option allows the display of the text in bold (B) or in italic (I). L'option « Style » permet d'afficher le texte en gras (B) ou en italique (I).
F: The "Size" allows the setting of the text size. L'option « Taille » permet de déterminer la taille du texte.	G: The "Preview" section let the user preview the result of all the choices. La section « Aperçu » donne la chance de prévisualiser tous les choix précédemment effectués.

The "Homepage" tab / L'onglet « Page d'accueil »

The "Homepage" tab allows the configuration of colors and fonts used in the homepage. L'onglet « Page d'accueil » permet de configurer les couleurs et les polices utilisées dans la page d'accueil.
Fichier:ProDon5 BackOffice_5.0.3 014.png
A: To choose the background of the homepage, go to the "Palette" option. Pour choisir la couleur de fond de la page d'accueil, il faut passer par l'option « Palette ».	B: The "Section header" allows the definition of the color, the size, the style and the background color of the section headers. L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section.
C: The "Section content" option allows the selection of the background of the section content. The font used in this part will be the standard one. L'option « Contenu des sections » permet de choisir la couleur de fond du contenu des sections. La police utilisée sera la police standard.	D: When the "Display title?" checkbox is checked, the title and the "Title" section will be displayed. L'option « Afficher le titre? » permet de choisir si le titre est affiché ou non. Lorsque cette option est activée, la section « Titre » est affichée.
E: The "Title" option helps to select the color, the size, the style and the background color of the title of the homepage. L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre de la page d'accueil.	F: The "Form name" option helps to set the color, the size and the style of the form name. L'option « Nom des formulaires » permet de déterminer la couleur, la taille et le style des noms des formulaires.
G: The "Description under form name" option helps to set the color, the size and the style of the description under the form name. L'option « Description sous le nom des formulaires » permet de déterminer la couleur, la taille et le style des descriptions sous le nom des formulaires.	H: The "Active box border" option helps to set from the palette the color of the border of the active box. The active box is the box currently selected by a user. L'option « Contour des boîtes actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.
I: The "Buttons" option allows the configuration of the background color, the text color and the style of the buttons of the homepage. L'option « Boutons » permet de configurer la couleur de fond et la couleur de texte ainsi que le style des boutons de la page d'accueil.

The Form tab / L'onglet « Formulaire »

The Form tab allows the configuration of the colors and fonts used in the forms. L'onglet « Formulaire » permet de configurer les couleurs et les polices utilisées dans les formulaires.
Fichier:ProDon5 BackOffice_5.0.3 015.png
A: To select the background color of the forms, go to the Palette option. Pour choisir la couleur de fond des formulaires, il faut passer par l'option « Palette ».	B: The "Section header" option allows the selection of the color, the size, and the background color of the section headers. L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section.
C: The "Section content" allows the selection of the background color of the section content. The font used will be the standard one. L'option « Contenu des sections » permet de choisir la couleur de fond du contenu des sections. La police utilisée sera la police standard.	D: The "Step bar" option allows the selection of the color, the size, the style and the background color of the step bar. L'option « Barre d'étape » permet de choisir la couleur, la taille, le style et la couleur de fond de la barre d'étape.
E: The "Step bar (current page)" allows the selection of the color, the size, the style and the background color of the current page of the step bar. L'option « Barre d'étape (page courante) » permet de choisir la couleur, la taille, le style et la couleur de fond de la page active de la barre d'étape.	F: The checkbox "Display the circle in the step bar" allows to display a circle in which there will be the number of the step. This box must be checked to unlock the options G and H . La case à cocher « Afficher le rond dans la barre d'étape » permet d'afficher un cercle dans lequel il y aura les numéros d'étapes. Il faut que cette case soit cochée pour voir les options G et H .
G: The "Step bar circle" allows the selection of the color, the size, the style and the background color of the circle in the step bar. L'option « Barre d'étape rond » permet de choisir la couleur, la taille, le style et la couleur de fond du cercle dans la barre d'étape.	H: The "Step bar cicle (Current page)" allows the selection of the color, the size, the style and the background color of the current page of the step bar. L'option « Barre d'étape rond(page courante) » permet de choisir la couleur, la taille, le style et la couleur de fond du cercle de la page active de la barre d'étape.
I: The "Display the title?" option allows the title to be displayed or not. The option must be activated to display the "Title" section. L'option « Afficher le titre? » permet de choisir si le titre est affiché ou non. Il faut que cette option soit activée pour que la section « Titre » soit affichée.	J: The "Title" option allows the selection of the color, the size, the style and the background color of the title of the form. L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre des forms.
K: The "Participants title" allows the selection of the color, the size and the style of the participants title. L'option « Titre des participants » permet de déterminer la couleur, la taille et le style des titres des participants.	L: The "Active box border" option allows the selection of the color from the the colors already set in the palette. An active is the currently selected box. L'option « Contour des boîtes actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.
M: The "Buttons" option allows the configuration of the background color, the text color and the style used for the form buttons. L'option « Boutons » permet de configurer la couleur de fond et la couleur de texte ainsi que le style des boutons des formulaires.	N: The "Button (Confirm)" option allows the configuration of the background color, the text color and the style used for the form confirm button. L'option « Bouton (confirmer) » permet de configurer la couleur de fond et la couleur de texte ainsi que le style du bouton confirmer des formulaires.

L'onglet « CSS »

L'onglet « CSS » permet de configurer les couleurs et les polices utilisées dans les formulaires.
Fichier:ProDon5 BackOffice_5.0.3 016.png
A: CSS est pour « Cascading Style Sheet ». C'est un langage de programmation qui ne sert qu'à ajuster les éléments visuels. Il n'est pas recommandé de toucher à cette fenêtre.	B: Si jamais l'utilisateur est très à l'aise et qu'il connait la programmation en CSS, il est possible d'éliminer tous les onglets (Options, palette, polices, page d'accueil, formulaire) pour n'avoir que l'onglet CSS. Pour ce faire, simplement cliquer sur la case « Utiliser mon CSS ». ATTENTION: Lorsque cette case est cochée et décochée successivement et qu'aucune information n'a été sauvegardée encore, aucun changement ne sera sauvegardé et l'utilisateur sera retourné à la page pour ajouter des thèmes.

Add files into the back office / Ajouter des fichiers dans le back-office

To add files, click on the "My files" section and click on add. Pour ajouter des fichiers, il faut cliquer sur la section « Mes fichiers » et cliquer sur ajouter.

Then this window will open: Ensuite, cette fenêtre ouvrira:

Fichier:ProDon5 BackOffice_5.0.3 018.png

The user will have to go find the pictures that will have to be added. Il faudra alors aller trouver les images qui doivent être ajoutées.

Then this window will open: Ensuite, cette fenêtre s'ouvrira:
Fichier:ProDon5 BackOffice_5.0.3 019.png
A: Here, the user can see the file that has been added. Ici, l'utilisateur peut voir le fichier qui vient d'être ajouté.	B: The user can see how much storage space used by the files. L'utilisateur peut voir la quantité d'espace que prennent ses fichiers.
C: To remove a file, click on the delete button. Pour retirer un fichier, il faut cliquer sur le bouton supprimer.

Create a picture group in the back office / Créer un groupe d'images dans le back-office

To create a picture group, the user will have to click on the "My picture groups" section and click on add. Pour créer un groupe d'images, il faut cliquer sur la section « Mes groupes d'images » et cliquer sur ajouter.

Then, this window will open: Ensuite, cette fenêtre ouvrira:
Fichier:ProDon5_BackOffice_5.0.3_021.png
A: This is where the user will have to name the picture group. C'est ici qu'il faut nommer le groupe d'images.	B: This checkbox let this picture group to be used by default. Cette case à cocher permet d'utiliser ce groupe d'images par défaut.
C: This option allows the setting ot the background picture of the homepage. Cette option permet de définir l'image de fond de la page d'accueil.	D: This option allows the setting of the background picture of the forms. Cette option permet de définir l'image de fond des formulaires.
E: This option allows the selection of the picture that will appear on the social network when the forms or the homepage will be shared. Cette option permet de choisir l'image qui apparaitra sur les réseaux sociaux quand le formulaire ou la page d'accueil sera partagé.	Note : Furthermore, the minimal size for social network picture is of 600 x 315 pixels. The recommanded size is of 1200 x 630 pixels. For any other size, it is recommanded to follow the 1.91:1 ratio. De plus, la grandeur minimale des images de réseaux sociaux est de 600 x 315 pixels. La taille recommandée est de 1200 x 630 pixels. Pour toute autre taille, il est recommandé de suivre le ratio 1.91:1.
F: This option allows the setting the header picture when the forms will be called by a computer. Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par un ordinateur.	G: This box allows the setting of the picture size by using percentage. Cette case permet de définir la dimension de l'image en pourcentage.
H: This box allows the setting of the alignment of the picture. Cette case permet de choisir si l'image est alignée à gauche, à droite ou au centre.	I: This option allows the setting the header picture when the forms will be called by a tablet PC. Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par une tablette.
J: This option allows the setting the header picture when the forms will be called by a cellphone. Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par un cellulaire.	K: Please consider this important warning. There is not really a limit about the height, but the width of the header pictures must not exceed 960 pixels. Il est important de considérer cet avertissement. Il n'y a pas vraiment de limite concernant la hauteur, mais la largeur des images d'entête ne doit pas dépasser 960 pixels.
NOTE: For the background pictures, the maximum suggested size for the background pictures is of 1920 x 1080 pixels. If the picture size is greater than this, it may be possible that the some browsers will not load it. Pour les images de fond, la taille maximale suggérée pour les images de fonds est de 1920 x 1080 pixels. Si l'image est plus grande, il est possible que le fureteur ne charge pas l'image.

Envoyer les formulaires en production

Après avoir créé toutes les bases du back-office, il est temps d'envoyer le tout en production.

Alors, partout où cette section est apparue, il faut cliquer sur le bouton « Production ».

Fichier:ProDon5_BackOffice_5.0.3_022.png

Lorsque le bouton est rouge, le formulaire/le groupe d'images n'a jamais été mis en production.

Fichier:ProDon5_BackOffice_5.0.3_023.png

Lorsque le bouton est jaune, le formulaire/le groupe d'images a été modifié et les modifications ne sont pas encore appliquées, donc elles ne sont pas en production.

Fichier:ProDon5_BackOffice_5.0.3_024.png

Quand le bouton est vert, le formulaire/le groupe d'images est en production et toutes les modifications sont en fonctions.

Link the back office into ProDon / Lier le back-office dans ProDon

Then this window will open: Ensuite, cette fenêtre ouvrira:
Fichier:ProDon5_BackOffice_5.0.3_025.png
A: In this box, the user will be able to select the theme just created on the back office. Dans cette case, l'utilisateur pourra sélectionner le thème qu'il vient de créer sur le back-office.	B: In this box, the user will be able to select the picture group that will have to be used in the French forms and the French homepage. Dans cette case, l'utilisateur pourra sélectionner le groupe d'images qu'il souhaite utiliser quand la page d'accueil et les formulaires sont en français.
C: In this box, the user will be able to select the picture group that will have to be used in the English forms and the English homepage. Dans cette case, l'utilisateur pourra sélectionner le groupe d'images qu'il souhaite utiliser quand la page d'accueil et les formulaires sont en anglais.	D: Do not forget to adjust the French and the English labels, because these elements will appear online. Il ne faut pas oublier d'ajuster les libellés en français et en anglais, car ce seront des éléments qui apparaitront en ligne.

---

Document name: ProDon:Back office 5.0.3
Version : 5.0.3

Printable version