Wewnętrzna, samodzielna konfiguracja i dostosowanie systemu do własnych potrzeb za pomocą javascript i CSS

Utworzono: 2017-03-13
Ostatnia aktualizacja: 2019-05-24

Liczba odwiedzin posta: 3288

Sugester pozwala na bardzo dowolną konfigurację formatek, ekranów i pól. Za pomocą wewnętrznej konfiguracji programistycznej jest możliwe dostosowanie wyglądu, ukrycie, przeniesienie, ustawienie pól jako wymaganych dla całego konta lub roli.

Konfiguracja ustawień dla całego konta znajduje się w menu Ustawienia > Ustawienia Konta > Zaawansowane w polu "HTML wstawiany do Panelu Admina" . Natomiast konfiguracja dla poszczególnych ról znajduje się w menu Ustawienia > Użytkownicy > Role > (wybrana rola) > w polu Konfiguracja programistyczna.

Poniższe elementy wklejamy bez otaczania tagami skryptu (<script> ... </script>) w przypadku edycji ROLI , jednak jeżeli wklejamy je do pola "" - otaczamy poniższe skrypty tagiem <script> TRESC SKRYPTU </script>


Przejdź bezpośrednio do przykładu:

  1. Przykład dodania do menu górnego nowego podmenu PRZED jakimś elementem (w tym przypadku Interesami ID "#menu_deals" ):
  2. Dodanie PO jakiejś zakładce (w tym przypadku Interesami ID "#menu_deals" ) w menu górnym (posiadającej podmenu rozwijane) dodatkowego menu z wyszukiwarką klientów:
  3. Dodanie po jakimś elemencie w menu górnym dodatkowego menu wysuwanego z wyszukiwarką klientów
  4. Przykład dodania elementu z podpowiedzią na ekranie edycji lub dodawania rozmowy VoIP (na podstronach http://NAZWA-KONTA.sugester.pl/app/voip/calls/####/edit lub http://NAZWA-KONTA.sugester.pl/app/voip/calls/new).
  5. Poniżej przykład ukrycia za pomocą CSS za pomocą pola "HTML wstawiany do Panelu Admina" w edycji klienta pól FAX
  6. Poniżej przykład ukrycia elementu (w tym przypadku kolejno: pola kategorii w klientach, pola adresu e-mail klienta, pola avatara klienta ) za pomocą Javascriptu
  7. Przykład dodania dwóch elementów (nowego menu i lupki wyszukiwania klientów na za menu Skróty )
  8. Dodawanie wymagalności jakichś pól (w poniższym przykładzie data Interesu):
  9. Zmiana nazwy jakiemuś elementowi (lub elementowi w nim) np. dla grupy userów:
  10. Przykład ukrycia wizualnego możliwości dodawania własnego statusu w polu wyboru statusu:
  11. Przykład automatycznego rozwijania widoku zgłoszeń przychodzących/wychodzących
  12. Przykład kodu CSS zwiększającego czcionkę w systemie:
  13. Jak wizualnie ukryć możliwość dodawania nowych statusów w kliencie jakiejś roli:
  14. Jak ustawić (dla całego konta lub np. wybranej roli) aby wybrane pole (w tym przypadku pole "Scoring") nie było możliwe do edycji
  15. Dodanie przycisku "Dodaj zadanie" w górnym menu
  16. Przestawienie jednego pola w formatce w inne jej miejsce
  17. Jak ustawić specyficzny widok lub działanie tylko dla wybranego użytkownika
  18. Przeniesienie sekcji "Aktywności" pod sekcję "Interesy" na karcie klienta
  19. Ukrycie wielu jednakowych elementów na stronie
  20. Przeniesienie dowolnego elementu na stronie w (prawie) dowolne miejsce
  21. Zmiana koloru tła odpowiedzi w forum(szablon domyślny)

Przykłady:

Przykład dodania do menu górnego nowego podmenu PRZED jakimś elementem (w tym przypadku Interesami ID "#menu_deals" ):

 

 

(function(){
  var $c = $('#menu_deals');
  if( $c.length > 0){
    $c.before(
      '<li>' +
        '<a href="URL-DO-KTÓREGO-MA-PROWADZIĆ-LINK NP: /app/deals">' +
          '<i class="fa fa-folder-o visible-sm-inline-block inline-block"></i>' +
          '<span class="hidden-sm inline-block">' +
            'NAZWA MENU - WYŚWIETLI SIĘ W GÓRNYM MENU' +
          '</span>' +
        '</a>' +
      '</li>'
    );
  }
})();




Dodanie PO jakiejś zakładce (w tym przypadku Interesami ID "#menu_deals" ) w menu górnym (posiadającej podmenu rozwijane) dodatkowego menu z wyszukiwarką klientów:

(function(){
  var $c = $('#menu_deals');
  if( $c.length > 0){
    $c.after(
    '<li class="divider"></li>' +
      '<li>' +
        '<form id="menu-top-form" class="p-xxs" action="../app/clients" accept-charset="UTF-8" method="get">' +
        '<input id="table_form_q11" class="form-control input-xs"  name="q" placeholder="Szukaj klientów" type="text" />' +          
        '</form>' +
      '</li>'
    );
  }
})();




Dodanie po jakimś elemencie w menu górnym dodatkowego menu wysuwanego z wyszukiwarką klientów


(function(){
  var $c = $('#menu_clients');
  if( $c.length > 0){
    $c.after(
    '<li class="dropdown" style="padding:0;margin:0"><a style="padding:0;margin:0" href="#" class="dropdown-toggle" data-toggle="dropdown" title="Szukaj klientów"><i class="fa fa-search"  style="padding:0;margin:0;font-size:9px;margin-top:21px"></i></a><ul class="dropdown-menu">' +
      '<li>' +
        '<form id="menu-top-form" class="p-xxs" action="../app/clients" accept-charset="UTF-8" method="get">' +
        '<input id="table_form_q11" class="form-control input-xs" name="q" placeholder="Szukaj klientów" type="text" />' +          
        '</form>' +
        '</ul></li>' +
      '</li>'
    );
  }
})();



 


Przykład dodania elementu z podpowiedzią na ekranie edycji lub dodawania rozmowy VoIP (na podstronach http://NAZWA-KONTA.sugester.pl/app/voip/calls/####/edit lub http://NAZWA-KONTA.sugester.pl/app/voip/calls/new).
Za pomocą tego javascriptu możemy dodawać dowolne elementy praktycznie na dowolnej podstronie w systemie (trzeba pamiętać żeby na górze skryptu dodać specyficzny zapis URLa).


<script>


$( document ).ready(function(){
  if(new RegExp("\\/app\\/voip\\/calls\\/(new|\\d+\/edit)").test(window.location.pathname)){

     var $c = $('.hr-line-dashed');
      if( $c.length > 0){
        $c.before(
          '<div class="alert alert-warning">' +
            'Podpowiedzi:' +
            '<ul>' +          
              '<li>' +
                'Zawsze pytaj o imię i nazwisko klientki' +
              '</li>' +
              '<li>' +
                'Jeżeli nie wyśiwetlił się numer telefonu - poproś o jego podanie' +
              '</li>' +

              '<li>' +
                'Poproś o podanie adresu e-mail' +
              '</li>' +          

            '</ul>' +
          '</div>'
        );
      }

  }
})();

</script>



 

Poniżej przykład ukrycia za pomocą CSS za pomocą pola "HTML wstawiany do Panelu Admina" w edycji klienta pól FAX (block_client_fax), stanowisko ( client_position)  i avatar (client_avatar) -

<style>

#block_client_fax,
body  label[for*="client_avatar"] + * + div,
body label[for*="client_avatar"] + *,
body  label[for*="client_avatar"] ,

body  label[for*="client_position"] + * + div,
body label[for*="client_position"] + *,
body  label[for*="client_position"] {
display:none;
}


</style>



Poniżej przykład ukrycia elementu (w tym przypadku kolejno: pola kategorii w klientach, pola adresu e-mail klienta, pola avatara klienta ) za pomocą Javascriptu

$('#block_client_category_id').hide()

żeby dodawać kolejne ukryte pola trzeba dodawać ";" po każdej linii (ale po ostatniej nie dodajemy), czyli:

$('#block_client_category_id').hide();
$('#block_client_eamail').hide();
$('#block_client_avatar').hide()


itd


Przykład dodania dwóch elementów (nowego menu i lupki wyszukiwania klientów na za menu Skróty )

(function(){
  var $c = $('#menu_shortcuts');
  if( $c.length > 0){
    $c.after(        
    '<li class="dropdown" style="padding:0;margin:0"><a style="padding:0 0 15px 0 ;margin:0" href="#" class="dropdown-toggle" data-toggle="dropdown" title="Szukaj klientów"><i class="fa fa-search"  style="padding:0;margin:0;font-size:9px;margin-top:21px"></i></a><ul class="dropdown-menu">' +
      '<li>' +
        '<form id="menu-top-form" class="p-xxs" action="/app/clients" accept-charset="UTF-8" method="get">' +
        '<input id="table_form_q11" class="form-control input-xs" name="q" placeholder="Szukaj klientów" type="text" style="width:300px"/>' +          
        '</form>' +
        '</ul></li>' +
      '</li>'
    );
  }
})();

(function(){
  var $c = $('#menu_clients');
  if( $c.length > 0){
    $c.after(
      '<li>' +
        '<a href="/app/deals">' +
          '<i class="fa fa fa-bank visible-sm-inline-block inline-block"></i>' +
          '<span class="hidden-sm inline-block">' +
            'Interesy' +
          '</span>' +
        '</a>' +
      '</li>'
    );
  }
})();



Dodawanie wymagalności jakichś pól (w poniższym przykładzie data Interesu):

$( "#deal_date" ).attr( "required", "true" );  
 


Jak badać ID elementu:



Powyższy javascript nie pozwoli zapisać formatki bez wypełnienia tego pola.
Aby zaznaczyć to pole jako wymagalne - czerwoną gwiazdką trzeba w polu  "HTML wstawiany do Panelu Admina" wkleić poniższy kod:
(otaczając tagiem <style></style> jeżeli jeszcze tego nie dodaliśmy)

label[for="client_name"]:after {
    color: #ff1200;
    content: " *";
    font-weight: bold;
}

 

Czasami trudno jest zbadać ID elementu SELECT2 . Poniżej nagranie jak to zrobić:




Zmiana nazwy jakiemuś elementowi (lub elementowi w nim) np. dla grupy userów:



<script>
$('#block_client_button_new > a > span').text("cokolwiek")
</script>


Przeniesienie jakiegoś pola w inne miejsce formatki. Poniżej przykład przeniesienia pola Stanowisko pod pole Nazwisko w edycji/dodawaniu kontaktu:

(function(){
  if(new RegExp("\\/app\\/contacts\\/(new|\\d+\/edit)").test(window.location.pathname)){
    var $p = $('#contact_position').parent().parent();
    var $ln = $('#contact_last_name').parent().parent();
    $ln.after($p);
  }
})();


Przykład ukrycia wizualnego możliwości dodawania własnego statusu w polu wyboru statusu:

<style>
select optgroup[label*="Więcej"] {display:none}
</style>


Przykład automatycznego rozwijania widoku zgłoszeń przychodzących/wychodzących

Kod należy wstawić w ustawieniach zaawansowanych, w polu Javascript wstawiany do Panelu admina
Scrypt dotyczy zmian zarówno dla inboxu, jak i outboxu. Jeśli chcemy ustawić automatyczne rozwijanie tylko dla inboxu lub outboxu, należy wkleić fragment kodu mu odpowiadający

$(document).ready(() => {
	// Inbox
	$('#sub_inbox1').show();
	$('#sub_inbox_link_1').toggleClass('fa-angle-down').toggleClass('fa-angle-up')

	// Outbox
	$('#sub_sent1').show();
	$('#sub_sent_link1').toggleClass('fa-angle-down').toggleClass('fa-angle-up')
});



Przykład kodu CSS zwiększającego czcionkę w systemie:


body * {
    font-size: 104%;
}


Aby powiększyć/zmniejszyć czcionkę należy odpowiednio zmodyfikować wartość font-size

Jak na stałe rozwinąć pod Inboxem "e-maile" i "zadania":

document.addEventListener('DOMContentLoaded', function(){

var inboxList = document.querySelector('.mailbox-content .file-manager .folder-list #sub_inbox1');

if(inboxList){
inboxList.style.display = "block";
}

})

Jak wizualnie ukryć możliwość dodawania nowych statusów w kliencie jakiejś roli:

<style>
#block_client_status_id select#client_status_id option[value*="--more--"] {display:none}

</style>




Jak ustawić (dla całego konta lub np. wybranej roli) aby wybrane pole (w tym przypadku pole "Scoring") nie było możliwe do edycji



<script>

$( document ).ready(function() {
     if(new RegExp("\\/app\\/clients\\/(new|\\d+\/edit)").test(window.location.pathname)){
var $element = $('#client_score');
    $element.prop('disabled', true);
    $element.attr('disabled', true);
  }
  });


</script>



Dodanie przycisku "Dodaj zadanie" w górnym menu:


<script>

$( document ).ready(function() {
  var $c = $('#menu_shortcuts');
  if( $c.length > 0){
    $c.after(
      '<li>' +
        '<a data-toggle="modal" data-target="#task_modal" href="#">' +          
            'Dodaj zadanie' +
        '</a>' +
      '</li>'
    );
  }
  });

</script>






Przestawienie jednego pola w formatce w inne jej miejsce:

(function(){
  if(new RegExp("\\/app\\/contacts\\/(new|\\d+\/edit)").test(window.location.pathname)){
    var $p = $('#contact_position').parent().parent();
    var $ln = $('#contact_last_name').parent().parent();
    $ln.after($p);
  }
})();


Powyższy przykład  przenosi pole "Stanowisko" pod pole "Nazwisko" na ekranie edycji lub dodawania nowego kontaktu


(function(){
  if(new RegExp("\\/app\\/clients\\/\\d").test(window.location.pathname)){
    var $p = $('#block_client_note_show');
    var $ln = $('#block_client_address_data');
    $ln.after($p);
  }
})();


Powyższy przykład przenosi pole Notatka w podglądzie karty klienta pod pole z danymi adresowymi



(function(){
  if(new RegExp("\\/app\\/clients\\/\\d").test(window.location.pathname)){
    var $p = $('#block_client_notes');
    var $ln = $('#block_client_address_data');
    $ln.after($p);
  }
})();


Powyższy przykład przenosi sekcję z Notatkami do klienta w podglądzie karty klienta pod pole z danymi adresowymi


Jak zmienić wygląd lub działanie systemu dla konkretnego użytkownika

<style>

body[rel="LOGIN_UZYTKOWNIKA(plus spacja) "]  {
    background-color: red !important;
}

</style>


Powyższy przykład zmienia kolor tła systemu na czerwony


Przeniesienie sekcji "Aktywności" pod sekcję "Interesy" na karcie klienta:



(function(){
  if(new RegExp("\\/app\\/clients\\/\\d").test(window.location.pathname)){
    var $p = $('#block_client_manual_activities');
    var $ln = $('#block_client_deals');
    $ln.after($p);
  }
})()

 




Usunięcie wielu jednakowych elementów na stronie

Odczytujemy klasę z instrukcji zamieszczonych wyżej i wpisujemy ją w miejsce ".class"

document.addEventListener('DOMContentLoaded', function(){
var ourClass = document.querySelectorAll('.class')
if(ourClass)
ourClass.forEach( function(x) {
if(x && x.style)
{ x.style.display = "none" }
})
})






Przeniesienie dowolnego elementu na stronie w (prawie) dowolne miejsce




Odczytujemy id lub klasę obiektu ktory chcemy przenieść oraz id lub klasę obiektu do ktorego chcemy przenieść

document.addEventListener('DOMContentLoaded',function(){
var przenoszony = document.querySelector('#menu_email_marketing')
var noweMiejsce = document.querySelector('#top_menu')
if(przenoszony && noweMiejsce){
   noweMiejsce.appendChild(przenoszony)
} })


powyższy kod przeniesie #menu_email_marketing, na sam koniec listy w menu, powyższy warunek (if) możemy zmienić na taki:

if(przenoszony && noweMiejsce){
noweMiejsce.insertBefore(przenoszony, noweMiejsce.childNodes[1])
}


powyższy kod powoduje przeniesienie "przenoszony" PRZED element znajdujący się w "noweMiejsce" o liczbe podanej w nawiasie kwadratowym, numerowanie elementów zaczyna się od 0, ten fragment kodu przeniesie nam "przenoszony" przed zadania



Zmiana koloru tła odpowiedzi w forum(szablon domyślny)

document.addEventListener('DOMContentLoaded', function(){
var allTargets = document.querySelectorAll('#comments .media .comment_answered .answered_mark')
for(var i = 0; i if(allTargets[i].textContent.includes('Odpowiedź główna')){
  allTargets[i].parentNode.parentNode.parentNode.style.background = "orange"
}else{
  allTargets[i].parentNode.parentNode.parentNode.style.background = "transparent"
}
}
})



powyższy kod zmieni tło odpowiedzi głównej na pomarańczowy i zostawi przeźroczysty dla reszty odpowiedzi


Powrót


Komentarze

Dodaj komentarz