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>)</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";
}})
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);
}
})()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<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>powyższy kod zmieni tło odpowiedzi głównej na pomarańczowy i zostawi przeźroczysty dla reszty odpowiedzi Dodanie linku (skrótu) do menu Skróty
(function(){
var $c = $('#menu_files');
if( $c.length > 0){
$c.before(
'<li>' +
'<a href="https://TUATJ DAJ LINK DO MIEJSCA GDZIE MA CIĘ PRZENIEŚĆ PO KLIKNIĘCIU">' +
'<i class="fa fa-folder-o visible-sm-inline-block inline-block"></i>' +
'<span class="hidden-sm inline-block">' +
'NAZWA MENU-TU WPISZ NAZWĘ' +
'</span>' +
'</a>' +
'</li>'
);
}
})();