Extension bootstrap

Bonjour,

J’ai une extension de bootstrap que j’aimerai utiliser dans mon projet. Comment puis-je ajouter tous les fichiers css de mon extension de tel sorte qu’ils soient tous pris en compte?

Merci pour votre réponse

C’est clairement non conseillé sous peine de modifier les comportements ou les performances de la plateforme.
Il faut surcharger les classes Simplicité ou Bootstrap en créant un Thème.

Effectivement, j’ai crée un thème et j’ai importé mon fichier css dans la partie “Addon styles”, et là, la plateforme a planté. Je ne sais pas si c’est ce qu’il faut faire.

Je doute que du CSS soit de nature à faire “planter” la plateforme. Ruiner les styles de la UI peut être.

Bon, en fait la réponse est plus complexe:

  1. s’il s’agit de faire un composant spécifique dans le cadre de la UI générique (ex: un objet externe “décoré” selon le vocabulaire Simplicité) avec des plugins Bootstrap additionnels il faut:
  • s’assurer que ces plugins sont bien compatibles avec la version de Bootstrap (3.3.7) et avec la version de jQuery (2.2.4) utilisées par la plateforme
  • ajouter les composants CSS et/ou JS de ces plugins sous forme de resources (ou d’URL externes via des CDN publics) soit niveau objet externe (les insertions est alors implicite) soit niveau disposition (les insertions sont alors explicites via des HTMLTool.appendCSSInclude(s)/appendJSIncludes(s))
  1. S’il s’agit d’une page specifique hors du cadre de la UI générique (un objet externe “non décoré” en vocabulaire Simplicité) il n’y a pas de contrainte vis à vis de la version de Bootstrap utilisée par la UI générique

Expliquez nous précisément votre besoin et on vous aidera, là le champ des possible est trop vaste pour se prononcer.

Si je comprends bien la question, il s’agit d’ajouter un addon bootstrap, sans nous en donner le nom et sans identifier les changements de comportement attendus sur la UI

  • juste des changements cosmétiques ?
  • ou plus intrusif sur l’UX ?

A défaut de précision, la réponse est théorique :

  • Dans un thème, le “addon styles” doit rester cosmétique, il permet de surcharger les classes natives pour coller à la charte graphique de son client (police, couleur, marge…), ou d’ajouter ses propres classes utilisables dans ses objets/pages spécifiques.

  • Il est strictement interdit pour des raisons de maintenabilité/garantie de modifier le comportement interne en ajoutant des CSS/JS intrusifs et non testés qui changeraient le fonctionnement des pages (animation/trigger surabondant, perte de media query, remplacement à chaud de tous les inputs par des gadgets non reconnus…).

Dans ce cas il faudra faire un change request pour étudier l’impact/intégrer/tester… si l’addon peut intéresser d’autres clients et s’il apporte une valeur à la plateforme.

Bonjour,

En gros, l’entreprise a développer son framework css qui repose sur bootstrap. j’aimerai changer complètement le desing de mon application (menu au dessus et non à gauche par exemple).

Comment puis-je faire??

La plateforme a planté, j’ai été obligé de fermer complètement le navigateur pour pouvoir reprendre la main.

Le “plantage” ne concerne que la page, l’essentiel de la plateforme est coté serveur et n’est donc pas susceptible d’être “plantée” par du CSS… Bref ce n’est pas le débat.

Je comprends que vous voulez customiser la UI générique avec les styles CSS Orange (basés sur Bootstratp).

Si c’est bien ça, comme je vous l’ai dit, la 1ère chose à vérifier c’est la compatibilité de la version du Bootstrap customisé Orange. Celui utilisé par Simplicité est une 3.3.7 avec jQueru 2.2.4, si les composnats Orange sont sur d’autres versions ça fera sans doute n’importe quoi.

Sinon, comme suggéré par François, vous devrez jouer avec les styles additionnels d’un thème pour imiter au mieux les styles Orange, si vous nous fournissez des copies d’écran de ces styles on peut vous aider sur ce point.

Pour ce qui est des composants de la UI générique (ex: le menu sur la gauche, la barre de recherche, les rccourcis, …), il est toujours possible de parameter une disposition specifique pour ne pas les faire apparaitre mais attention c’est plus complique et vous ne pourrez de tote façon pas gommer totalement les fondamentaux ergonomiques de la plateforme, ex: une liste restera une liste à la mode Simplicité, un formulaire un formulaire à la mode Simplicité etc.

La UI générique Simplicité et son API sous -acente est souple mais plus vous envisagez de la customiser plus vous devrez écrire de code et donc plus vous vous éloignerez de la vocation première de la plateforme qui est d’être une plateforme low code.

Bref, si possible, limitez vous à des aspects esthétiques et évitez de vous lancer dans de la customisation ergonomique car ça finira forcément par être contre productif.

@Francois, je pense qu’il faudrait que tu échange avec @Arnaud sur ces aspects de convergence de la UI Simplicité avec le framework Orange

L’extension s’appelle boosted et il est accessible via ce lien: http://boosted.orange.com/.

Vous y trouverez les styles utilisés chez Orange. Ce sont ces styles que j’aimerai utiliser sur mon projet

Simplicité est lui-même un “framework” qui utilise/customise ou non bootstrap.

  • Il faut dans un premier temps copier les CSS (couleur / taille) des composants (alert, buttons, jumbotron…)
  • utiliser les champs standard du Theme Simplicité pour y mettre les couleurs de menu / header noir…

On pourra faire une prestation pour fournir à Orange un Thème similaire et compatible avec Simplicité.
Mais avec quelques styles vous pouvez facilement faire quelque chose qui s’en approche.

Dans Simplicité, tout n’est pas bootstrap

  • le header est un flex plus souple et évolutif qu’un navbar
  • le menu métier est à gauche/accordion/responsive car potentiellement grand

Le framework Orange est par contre bien adapté sur un front spécifique avec peu de fonctionnalités (comme dans la démo pizza ou ordering).

Justement, mon application n’aura pas un grand menu et je veux qu’il soit placé au dessus. A défaut, je pourrai faire mon menu avec liste déroulante.

Ce que je veux par exemple, c’est avoir une vue comme celle-ci (ci-dessous) pour l’exécution de mes processus

Et la suivante pour mes tableaux par exemple :

J’ai essayé de suivre vos instructions en modifiant les css de mes composants, et en paramétrant les champs standard du Thème Simplicité. Lorsque je fais un test, je me trouve en face de cette fenêtre qui charge indéfiniment

Je suis obligé de fermer/rouvrir le navigateur pour pouvoir reprendre la main.

Quesque je peux faire pour resoudre ce problème?

Je vous remercie d’avance

Ouvrez le debugger du navigateur pour voir pourquoi le loading ne fonctionne pas dans la console.
Vous devez importer un contenu corrompu (js, css…) que le navigateur n’arrive pas à digérer, et du coup le callback “ready” n’est jamais appelé pour afficher la page.