Wewnętrzna, samodzielna konfiguracja i dostosowanie systemu do własnych potrzeb za pomocą javascript i CSS
Ostatnia aktualizacja: 2024-07-08
Liczba odwiedzin posta: 7384
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:
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:
$( 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 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 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>'
);
}
})();
Zarządzaj całą swoją firmą w jednej aplikacji. Wypróbuj Sugester przez 30 dni za darmo!
Rozpocznij darmowy okres testowyPowrót
Dodaj komentarz