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

<script> ... </script>)</code> w przypadku edycji ROLI , jednak jeżeli wklejamy je do pola "<label for="account_panel_html">HTML wstawiany do Panelu Admina</label>" - otaczamy poniższe skrypty tagiem <code><script> TRESC SKRYPTU </script></code>
Przejdź bezpośrednio do przykładu:
<ol class="jump_menu">
	<li><a href="#example_1">Przykład dodania do menu górnego nowego podmenu PRZED jakimś elementem (w tym przypadku Interesami ID "#menu_deals" ):</a></li>
	<li><a href="#example_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:</a></li>
	<li><a href="#example_3">Dodanie po jakimś elemencie w menu górnym dodatkowego menu wysuwanego z wyszukiwarką klientów</a></li>
	<li><a href="#example_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).</a></li>
	<li><a href="#example_5">Poniżej przykład ukrycia za pomocą CSS za pomocą pola "HTML wstawiany do Panelu Admina" w edycji klienta pól FAX</a></li>
	<li><a href="#example_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</a></li>
	<li><a href="#example_7">Przykład dodania dwóch elementów (nowego menu i lupki wyszukiwania klientów na za menu Skróty )</a></li>
	<li><a href="#example_8">Dodawanie wymagalności jakichś pól (w poniższym przykładzie data Interesu):</a></li>
	<li><a href="#example_10">Zmiana nazwy jakiemuś elementowi (lub elementowi w nim) np. dla grupy userów:</a></li>
	<li><a href="#example_11">Przykład ukrycia wizualnego możliwości dodawania własnego statusu w polu wyboru statusu:</a></li>
	<li><a href="#example_12">Przykład automatycznego rozwijania widoku zgłoszeń przychodzących/wychodzących</a></li>
	<li><a href="#example_13">Przykład kodu CSS zwiększającego czcionkę w systemie:</a></li>
	<li><a href="#example_14">Jak wizualnie ukryć możliwość dodawania nowych statusów w kliencie jakiejś roli:</a></li>
	<li><a href="#example_15">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</a></li>
	<li><a href="#example_16">Dodanie przycisku "Dodaj zadanie" w górnym menu</a></li>
	<li><a href="#example_17">Przestawienie jednego pola w formatce w inne jej miejsce</a></li>
	<li><a href="#example_18">Jak ustawić specyficzny widok lub działanie tylko dla wybranego użytkownika</a></li>
	<li><a href="#example_19">Przeniesienie sekcji "Aktywności" pod sekcję "Interesy" na karcie klienta</a></li>
	<li><a href="#example_20">Ukrycie wielu jednakowych elementów na stronie</a></li>
	<li><a href="#example_21">Przeniesienie dowolnego elementu na stronie w (prawie) dowolne miejsce</a></li>
	<li><a href="#example_22">Zmiana koloru tła odpowiedzi w forum(szablon domyślny)</a></li>
	<li><a href="#example_23">Dodanie linku (skrótu) do menu "Skróty"</a></li>
</ol>
Przykłady:
Przykład dodania do menu górnego nowego podmenu PRZED jakimś elementem (w tym przypadku Interesami ID "#menu_deals" ):
<code class="language-javascript">(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>'
    );
  }
})();</code>
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:
<code class="language-javascript">(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>'
    );
  }
})();</code>
Dodanie po jakimś elemencie w menu górnym dodatkowego menu wysuwanego z wyszukiwarką klientów
<code class="language-javascript">(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>'
    );
  }
})();</code>
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).
<code class="language-javascript"><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></code>
Poniżej przykład ukrycia za pomocą CSS za pomocą pola "HTML wstawiany do Panelu Admina" w edycji klienta pól FAX (<code>block_client_fax)</code>, stanowisko ( <code>client_position) </code> i avatar (<code>client_avatar)</code> -
<code class="language-text"><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></code>
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
<code>$('#block_client_category_id').hide()</code>
żeby dodawać kolejne ukryte pola trzeba dodawać ";" po każdej linii (ale po ostatniej nie dodajemy), czyli:
<code>$('#block_client_category_id').hide();
$('#block_client_eamail').hide();
$('#block_client_avatar').hide()</code>
itd
Przykład dodania dwóch elementów (nowego menu i lupki wyszukiwania klientów na za menu Skróty )
<code class="language-javascript">(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>'
    );
  }
})();</code>
Dodawanie wymagalności jakichś pól (w poniższym przykładzie data Interesu):
<code>$( "#deal_date" ).attr( "required", "true" );  </code>
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)
<code class="language-text">label[for="client_name"]:after {
    color: #ff1200;
    content: " *";
    font-weight: bold;
}</code>
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:
<code><script>
$('#block_client_button_new > a > span').text("cokolwiek")
</script></code>
Przeniesienie jakiegoś pola w inne miejsce formatki. Poniżej przykład przeniesienia pola Stanowisko pod pole Nazwisko w edycji/dodawaniu kontaktu:
<code class="language-javascript">(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);
  }
})();</code>
Przykład ukrycia wizualnego możliwości dodawania własnego statusu w polu wyboru statusu:
<code class="language-css"><style>
select optgroup[label*="Więcej"] {display:none}
</style></code>
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
<code class="language-javascript">$(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')
});</code>
Przykład kodu CSS zwiększającego czcionkę w systemie:
<code class="language-text">body * {
    font-size: 104%;
}</code>
Aby powiększyć/zmniejszyć czcionkę należy odpowiednio zmodyfikować wartość font-size
Jak na stałe rozwinąć pod Inboxem "e-maile" i "zadania":
<code>document.addEventListener('DOMContentLoaded', function(){
var inboxList = document.querySelector('.mailbox-content .file-manager .folder-list #sub_inbox1');

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

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

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

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

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

(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);
  }
})();

(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);
  }
})();

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

(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);
  }
})()

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

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

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

document.addEventListener('DOMContentLoaded', function(){
var allTargets = document.querySelectorAll('#comments .media .comment_answered .answered_mark')
for(var i = 0; i<alltargets.length 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"
}
}
})</alltargets.length>