CSS et Javascript customisé

Vous pouvez personnaliser encore plus votre application en ajoutant du CSS customisé ou du javascript personnalisé.

Pour ajouter du CSS ou du javascript, il faut aller dans la roue crantée -> Configuration -> Général -> Avancé.

Exemple de CSS customisé

Par exemple, vous souhaitez changer la couleur du bandeau de menu en haut de l'application.

Pour cela, ajoutez des commandes CSS dans la partie CSS customisé. Le code sera le suivant :

.navbar { background-color: #4c208c;  }
.navbar-default .navbar-nav > .active > a {background-color:#1e1026}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {background-color: #491760}

Exemple de Javascript customisé

Grâce au Javascript customisé, vous pouvez par exmple ajouter un plan google maps dans vos objets qui contiennent un champ adresse.

Vous pouvez le faire via un ajout de bouton qui ouvre googlemaps dans un autre onglet avec le code suivant :

if ($('.object_entity_view .main-info .attr_adresse').length) { // si un attribut nommé adresse est présent dans la fiche de détail d'un objet
    var adresse = $('.object_entity_view .main-info .attr_adresse .value-container').text().replace(/(\r\n|\n|\r)/gm, " ");
  
    if (adresse) {
        // Créer le nouveau bouton
        var googleMapsButton = document.createElement('a');
        googleMapsButton.className = 'btn btn-info btn-right';  // Classes Bootstrap pour le style
        googleMapsButton.href = 'https://www.google.com/maps?q=' + encodeURI(adresse);  // Lien Google Maps
        googleMapsButton.title = 'Généré via du JS LowCode';
        googleMapsButton.target = '_blank';  // Ouvrir dans un nouvel onglet
        googleMapsButton.innerHTML = '<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><span> Voir dans Google Maps</span>';  // Contenu HTML du bouton

        // Insérer le bouton dans la section souhaitée
        $(googleMapsButton).insertAfter('.panel-heading a.btn-success[href*="/edit/"]');
    }
}

if ($('body').hasClass('object_entity_view')) {
    // Vérifie que l'on est bien sur une page de détail d'un objet
    document.addEventListener('DOMContentLoaded', function() {
        $('.panel-heading a[href*=object_entity_]').each(function() {
            var panel = $(this).parents('.panel');
            var regex = /(object_entity[^/]+)/gm;
            var m = regex.exec($(this).attr('href'));
            if (m) {
                m.forEach((match, groupIndex) => {
                    $(panel).addClass(match);
                });
            }
        });
    });
}

Ce code permettra d'affiche un bouton "Voir dans google Maps" sur tous les objets qui contiennent un attribut adresse.

Vous pouvez également le faire en incorporant dans la page Googlemaps avec le code suivant :

if ($('.object_entity_view .main-info .attr_adresse').length) { //si un attribut nommé adresse est présent dans la fiche de détail d'un objet
  var adresse = $('.object_entity_view .main-info .attr_adresse .value-container').text().replace(/(\r\n|\n|\r)/gm, " ");
  
   if (adresse) {
    // Créer le nouveau bouton
    var googleMapsButton = document.createElement('a');
    googleMapsButton.className = 'btn btn-info btn-right';  // Classes Bootstrap pour le style
    googleMapsButton.href = 'https://www.google.com/maps?q='+encodeURI(adresse);  // Lien Google Maps
    googleMapsButton.title = 'Généré via du JS LowCode';
    googleMapsButton.target = '_blank';  // Ouvrir dans un nouvel onglet
    googleMapsButton.innerHTML = '<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><span> Voir dans Google Maps</span>';  // Contenu HTML du bouton

    // Insérer le plan google maps dans la section souhaitée

     
     $('<div class="col-xs-12 col-sm-12 col-md-4 col-lg-6"><div class="panel panel-default">\
  <div class="panel-heading"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Google Maps</div>\
  <div class="panel-body" style="padding: 0;">\
    <iframe src="'+googleMapsButton.href+'&output=embed" class="iframe" style="width: 100%; height: 100%; border: none;"></iframe>\
  </div>\
</div></div>').insertAfter('.object_entity_view .main-info');
     
 
    
  }
}
if ($('body').hasClass('object_entity_view')) {
  //on est sur une page de détail d'un objet
  document.addEventListener('DOMContentLoaded', function() {
      $('.panel-heading a[href*=object_entity_]').each(function() {
          var panel = $(this).parents('.panel');
          var regex = /(object_entity[^/]+)/gm;
          var m = regex.exec($(this).attr('href'));
          if (m) {
            m.forEach((match, groupIndex) => {
                $(panel).addClass(match);
            });
          }
      });
  });
}