Embarquer l’API JS FlowerDocs au sein de la page
Afin de charger l’API JS FlowerDocs au sein de notre page, il est nécessaire d’ajouter au niveau du header du template de celle-ci les 2 lignes suivantes :
<script type="text/javascript" language="javascript" th:src="@{'../../../scripts/flower.js?v='+${version}}"></script>
<script type="text/javascript" language="javascript" th:src="@{'../../../flowergwt/flowergwt.nocache.js?v='+${version}}"></script>
Utilisation de l’API JS FlowerDocs
Notifications
Vous pouvez restreindre les utilisateurs à ne pouvoir déposer qu’un unique fichier. Pour cela, il suffit de modifier la configuration de la zone de dépôt de fichier pour ne permettre le versement que d’un seul contenu. Ajoutez la propriété maxFiles: 1 lors de la création de la zone de fichier.
Vous devriez avoir en script de votre page :
L’utilisateur est maintenant restreint, il peut toujours sélectionner un deuxième fichier mais celui-ci ne sera pas valide. Nous allons donc adapter notre script pour supprimer ce fichier invalide et informer l’utilisateur que le nombre maximum de fichier autorisé à été dépassé. Pour cela, nous devons nous abonner à l’évènement maxfilesexceeded de la dropzone:
myDropzone.on("maxfilesexceeded", file =>{});
Avec la ligne suivante au sein de l’abonnement, nous supprimons le fichier en trop de la zone de dépôt de fichier :
myDropzone.removeFile(file);
Toujours au sein de l’abonnement nous allons utiliser l’API JS de notification ainsi que les libellés de FlowerDocs afin d’avertir l’utilisateur :
function maxFilesExceededNotification(){
var labelAPI = JSAPI.get().getLabelsAPI();
var error = labelAPI.getLabel("maximumNumberOfFilesReached");
JSAPI.get().getNotificationAPI().sendError(error);
}
Le script de la page est maintenant :
Visualisation du document déposé avec ARender
Avant de valider le formulaire, l’utilisateur pourra vérifier que le document déposé est celui voulu en le visualisant dans la visionneuse ARender intégrée dans FlowerDocs. Pour cela, nous devons ouvrir le fichier temporaire dans une iframe ARender lorsque le fichier est chargé.
Nous nous abonnons à son chargement grâce à la ligne suivante et récupérons l’identifiant du fichier chargé:
myDropzone.on("success", function(file) {
var parts = file.xhr.responseText.split('|');
fileId = parts[0];
// add iframe
});
Le script suivant permet de créer l’iframe ARender dans la page :
var ifrm = document.createElement("iframe");
function visualizeDocument(fileId){
ifrm.setAttribute("src", "../../../ARender.html?v="+[[${version}]]+"&props=arender&locale=fr&timeZone=Europe%2FParis&tmp="+fileId+"&scope="+<scope>+"&topPanel.documentMenu=false&topPanel.annotationMenu=false&documentbuilder.enabled=false&topPanel.search=false&advanced.searchexplorer.enabled=false&annotation.comment.explorer.enabled=false&topPanel.imageProcessMenu.brightness.enabled=false&topPanel.imageProcessMenu.contrast.enabled=false&topPanel.rotation.left=false&topPanel.rotation.right=false");
ifrm.style.width = "100rem";
ifrm.style.height = "60rem";
ifrm.style.margin = "0 0 0 1rem";
document.body.getElementsByClassName("wrapper-page")[0].appendChild(ifrm);
}
Le script de la page est maintenant :
Lorsque l’utilisateur dépose un fichier celui-ci s’ouvre à côté du formulaire dans ARender.
Création du document RH dans FlowerDocs à la soumission du formulaire
Maintenant que l’utilisateur a vérifié que le document déposé est le bon ainsi que le reste des informations demandées, il doit pouvoir soumettre sa candidature. Pour cela, nous allons créer le document dans FlowerDocs avec le contenu du fichier déposé ainsi que les informations renseignées par l’utilisateur.
function setSubmitUrl(form) {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
var email = $("#email").val();
var doc = new Document();
doc.setName('CV ' + firstname + ' ' + lastname);
doc.setClassId('RH');
doc.addTag('Email',email,false);
doc.addTag('FirstName',firstname,false);
doc.addTag('LastName',lastname,false);
doc.addFile(fileId);
JSAPI.get().document().create(new Array(doc), function(documents) {
console.info('Le document : ' + documents[0].getName() + ' a été créé');
});
return false;
}
Le script de la page est maintenant :