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

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 "HTML wstawiany do Panelu Admina" - 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)
22. Dodanie linku (skrótu) do menu "Skróty"

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).

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:


$( document ).ready(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);
  }
})()