# Personalização
# Botões
O Sprout possui uma regra de customização para botões virtuais. Onde, o usuário poderá aplicar tamanhos, cores, estilos e ícones com Font Awesome na criação de um botão. Assim, é possível já por padrão, adequá-lo ao layout do seu sistema.
A regra é facilmente definida aplicando a referência como prefixo no nome do botão. Por exemplo, para criar um botão grande, basta aplicar o prefixo ms_le ao nome do botão: ms_le_btn_copy
Mais de uma referência pode ser aplicada ao mesmo botão, sendo limitada apenas pela quantidade de caracteres que a interface do Scriptcase permite para o nome de um botão.
Por exemplo, para criar um botão com ícone e class, basta aplicar os prefixos ms_del e ms_ldr ao nome do botão: ms_del_ms_ldr_del_user
Confira abaixo a lista com todas as referências de botões, disponíveis no Sprout:
*Este estilo possui diferença no hover.
# Tamanhos
| Referência | Descrição | Exemplo |
|---|---|---|
| ms_sl | Class small | Exemplo |
| ms_le | Class large | Exemplo |
# Cores
| Referência | Descrição | Exemplo |
|---|---|---|
| ms_py | Class primary. Hex.: #3699ff ■ | Exemplo |
| ms_sy | Class secondary. Hex.: #e5eaee ■ | Exemplo |
| ms_ss | Class success. Hex.: #1bc5bd ■ | Exemplo |
| ms_dr | Class dander. Hex.: #f64e60 ■ | Exemplo |
| ms_wg | Class warning. Hex.: #ffa800 ■ | Exemplo |
| ms_io | Class info. Hex.: #8950fc ■ | Exemplo |
| ms_lt | Class light. Hex.: #f3f6f9 ■ | Exemplo |
| ms_dk | Class dark. Hex.: #212121 ■ | Exemplo |
# Estilos Light
| Referência | Descrição | Exemplo |
|---|---|---|
| ms_lss | Class light success | Exemplo |
| ms_lpy | Class light primary | Exemplo |
| ms_ldr | Class light danger | Exemplo |
| ms_lwg | Class light warning | Exemplo |
| ms_ldk | Class light dark | Exemplo |
# Estilos Light hover*
*Este estilo possui diferença no hover.
| Referência | Descrição | Exemplo |
|---|---|---|
| ms_lhss | Class light hover success | Exemplo |
| ms_lhpy | Class light hover primary | Exemplo |
| ms_lhdr | Class light hover danger | Exemplo |
| ms_lhwg | Class light hover warning | Exemplo |
| ms_lhdk | Class light hover dark | Exemplo |
# Estilos Light background*
*Este estilo possui diferença no hover.
| Referência | Descrição | Exemplo |
|---|---|---|
| ms_lbss | Class light background success | Exemplo |
| ms_lbpy | Class light background primary | Exemplo |
| ms_lbdr | Class light background danger | Exemplo |
| ms_lbwg | Class light background warning | Exemplo |
| ms_lbdk | Class light background dark | Exemplo |
# Font Awesome
| Referência | Ícone | Exemplo | Referência | Ícone | Exemplo |
|---|---|---|---|---|---|
| ms_close |  | Exemplo | ms_rght |  | Exemplo |
| ms_ok |  | Exemplo | ms_tab |  | Exemplo |
| ms_clear |  | Exemplo | ms_srch |  | Exemplo |
| ms_undo |  | Exemplo | ms_chrt |  | Exemplo |
| ms_save |  | Exemplo | ms_list |  | Exemplo |
| ms_cancel |  | Exemplo | ms_sort |  | Exemplo |
| ms_copy |  | Exemplo | ms_tbl |  | Exemplo |
| ms_check |  | Exemplo | ms_magic |  | Exemplo |
| ms_add |  | Exemplo | ms_cog |  | Exemplo |
| ms_del |  | Exemplo | ms_bar |  | Exemplo |
| ms_edit |  | Exemplo | ms_line |  | Exemplo |
| ms_first |  | Exemplo | ms_pie |  | Exemplo |
| ms_back |  | Exemplo | ms_stck |  | Exemplo |
| ms_next |  | Exemplo | ms_tach |  | Exemplo |
| ms_last |  | Exemplo | ms_pdf |  | Exemplo |
| ms_remove |  | Exemplo | ms_wrd |  | Exemplo |
| ms_up |  | Exemplo | ms_prnt |  | Exemplo |
| ms_down |  | Exemplo | ms_xls |  | Exemplo |
| ms_hide |  | Exemplo | ms_xml |  | Exemplo |
| ms_view |  | Exemplo | ms_csv |  | Exemplo |
| ms_max |  | Exemplo | ms_img |  | Exemplo |
| ms_upl |  | Exemplo | ms_mail |  | Exemplo |
| ms_clock |  | Exemplo | ms_more |  | Exemplo |
| ms_gear |  | Exemplo | ms_dwnl |  | Exemplo |
| ms_data |  | Exemplo | ms_warn |  | Exemplo |
| ms_pw |  | Exemplo | ms_fb |  | Exemplo |
| ms_exit |  | Exemplo | ms_gogl |  | Exemplo |
| ms_event |  | Exemplo | ms_papl |  | Exemplo |
| ms_alert |  | Exemplo | ms_twtt |  | Exemplo |
| ms_ask |  | Exemplo | ms_sad |  | Exemplo |
| ms_bell |  | Exemplo | ms_home |  | Exemplo |
| ms_lft |  | Exemplo |
# Macros
Além da customização dos botões, o Sprout também dispõe de macros exclusivas, planejadas para oferecer mais dinamismo ao sistema.
| Macro | Descrição |
|---|---|
| sc_field_group() | Esta macro permite agrupar múltiplos valores em um único campo da consulta. |
| sc_input_group() | Esta macro permite criar agrupamentos de textos e ícones nos inputs dos formulários. |
| sc_float_label() | Esta macro permite transformar o placeholder como label flutuante nos inputs dos formulários. |
| sc_back_to_top() | Esta macro cria um botão, no margem inferior durante o rolamento da página, redirecionando para o topo. |
| sc_add_notification() | Esta macro permite o envio de mensagens de alerta ou eventos do sistema. |
# sc_field_group
sc_field_group(text, array_config)
Esta macro permite agrupar múltiplos valores em um único campo da consulta. Através dos parâmetros é possível informar os valores que serão exibidos e também uma série de configurações de exibição através de um array.
O uso desta macro é estrito ao evento onRecord da consulta.
Esta macro requer o uso da biblioteca interna fieldGroup.php, que por padrão vem habilitada.
# Parâmetros
| Parâmetro | Descrição | Tipo | |
|---|---|---|---|
| text | Este parâmetro irá receber os valores que serão exibidos. Podendo ser uma string ou um array com múltiplos valores. | string ou array | Obrigatório |
| array_config* | Este parâmetro receberá um array com dois índices de configurações: ms_initial e ms_list. Veja abaixo todos os parâmetros disponíveis e suas respectivas descrições. | array | Opcional |
*Este parâmetro não é obrigatório para funcionamento da macro.
# ms_initial
| Índice | Descrição | Tipo | |
|---|---|---|---|
| ["ms_initial"]["img"]["field"] | Recebe valor de Campo imagem (Nome de Arquivo) | string | Opcional |
| ["ms_initial"]["img"]["path"] | Aplica o caminho padrão para imagens do Scriptcase. (Y/N) | string | Opcional |
| ["ms_initial"]["img"]["viewer"] | Aplica o visualizador de imagem no clique da imagem. (Y/N) | string | Opcional |
| ["ms_initial"]["icon"] | Recebe valor de ícone Font Awesome. | string | Opcional |
| ["ms_initial"]["text"] | Recebe valor que será utilizado para aplicar a inicial. | string | Opcional |
# ms_list
| Índice | Descrição | Tipo | |
|---|---|---|---|
| ["ms_list"]["title"] | Título | string | Opcional |
| ["ms_list"]["note"]["theme"] | Texto small que receberá cor a partir do tema selecionado. | string | Opcional |
| ["ms_list"]["note"]["primary"] | Texto small que receberá a classe primary. Hex.: #3699ff ■ | string | Opcional |
| ["ms_list"]["note"]["danger"] | Texto small que receberá a classe danger. Hex.: #f64e60 ■ | string | Opcional |
| ["ms_list"]["note"]["warning"] | Texto small que receberá a classe warning. Hex.: #ffa800 ■ | string | Opcional |
| ["ms_list"]["note"]["success"] | Texto small que receberá a classe success. Hex.: #1bc5bd ■ | string | Opcional |
| ["ms_list"]["note"]["info"] | Texto small que receberá a classe info. Hex.: #8950fc ■ | string | Opcional |
# Exemplo
Consultas - onRecord
$admin = (isset({set_admin}) && {set_admin} == "Y") ? {lang_sec_user_fld_set_admin} : "";
$set = array();
$set["ms_initial"]["img"]["field"] = {photo};
$set["ms_initial"]["img"]["viewer"] = "Y";
$set["ms_initial"]["text"] = {first_name};
$set["ms_list"]["title"] = {first_name} . " " . {last_name};
$set["ms_list"]["note"]["primary"] = $admin;
{user} = sc_field_group({email}, $set);
# sc_input_group
sc_input_group(array_fields, sc_seq_vert)
Esta macro permite criar grupos de texto e ícone nos inputs do formulário. Através dos parâmetros é possível informar um array multidimensional que receberá os campos, conteúdos e tipos que podem ser textos ou ícones Font Awesome (opens new window).
O uso desta macro é estrito aos eventos onLoad e onLoadRecord das aplicações de formulário, controle e calendário.
Esta macro requer o uso da biblioteca interna inputGroup.php, que por padrão vem habilitada.
Desabilite a opção Exibir output Ajax nas configurações da aplicação.
# Parâmetros
| Parâmetro | Descrição | Tipo | |
|---|---|---|---|
| array_fields | Este parâmetro irá receber um array multidimensional com os campos, conteúdos e tipos que podem ser textos ou ícones Font Awesome. | array | Obrigatório |
| sc_seq_vert* | Este parâmetro armazena o número da linha atual do registro que está sendo executado pelo evento. Sendo obrigatório somente para orientações de formulários horizontais. ($sc_seq_vert) | variable | Obrigatório |
*Este parâmetro deve receber a variável $sc_seq_vert e é obrigatório somente para orientações de múltiplos registros, grid editável e grid editável(view).
# Array Multidimensional
| Posições | Descrição | Tipo | |
|---|---|---|---|
| Campo* | Recebe o nome do campo. | string | Obrigatório |
| Tipo | Recebe o tipo de grupo. (text/icon) | string | Obrigatório |
| Conteúdo** | Recebe o texto que será exibido ou ícone. | string | Obrigatório |
| Orientação | Recebe a posição em que o grupo será utilizado. (left/right) | string | Obrigatório |
*Ver tipos de campos suportados.
**Para ícones é necessário informar o atributo class do Font Awesome (opens new window). Exemplo: fas fa-user.
# Tipos de Campos Suportados
| Tipos de Campos |
|---|
| Texto |
| Número |
| Decimal |
| Moeda |
| CPF |
| CNPJ |
| CPF e CNPJ |
| Tipo Cartão |
| CEP |
| URL |
| Cor HMTL |
| Data |
| Hora |
# Exemplos
Formulários único registro, controles e calendários - onLoad
$arr_fields = [
['smtp_server', 'icon', 'fas fa-server', 'left'],
['smtp_email', 'icon', 'fas fa-at', 'left'],
['smtp_user', 'icon', 'fas fa-user', 'left'],
['smtp_pswd', 'icon', 'fas fa-key', 'left']
];
sc_input_group($arr_fields);
Formulários múltiplos registros, grid editável e grid editável (view) - onLoadRecord
$arr_fields = [
['mod', 'icon', 'fas fa-bars', 'left']
];
sc_input_group($arr_fields, $sc_seq_vert);
# sc_float_label
sc_float_label(array_fields, sc_seq_vert)
Esta macro permite transformar o placeholder como label flutuante nos inputs dos formulários. Através dos parâmetros é possível informar um array que receberá todos os campos em que o recurso será aplicado.
O uso desta macro requer que o campo utilizado contenha um placeholder(Marca d'água).
O uso desta macro é estrito aos eventos onLoad e onLoadRecord das aplicações de formulário, controle e calendário.
Esta macro requer o uso da biblioteca interna floatLabel.php, que por padrão vem habilitada.
Desabilite a opção Exibir output Ajax nas configurações da aplicação.
# Parâmetros
| Parâmetro | Descrição | Tipo | |
|---|---|---|---|
| array_fields | Este parâmetro irá receber um array com os campos. | array | Obrigatório |
| sc_seq_vert* | Este parâmetro armazena o número da linha atual do registro que está sendo executado pelo evento. Sendo obrigatório somente para orientações de formulários horizontais. | variable | Obrigatório |
*Este parâmetro deve receber a variável $sc_seq_vert e é obrigatório somente para orientações de múltiplos registros, grid editável e grid editável(view).
# Array
| Posições | Descrição | Tipo | |
|---|---|---|---|
| Campo* | Recebe o nome do campo. | string | Obrigatório |
*Ver tipos de campos suportados.
# Tipos de Campos Suportados
| Tipos de Campos |
|---|
| Texto |
| Número |
| Decimal |
| Moeda |
| CPF |
| CNPJ |
| CPF e CNPJ |
| Tipo Cartão |
| CEP |
| URL |
| Cor HMTL |
| Data |
| Hora |
# Exemplos
Formulários único registro, controles e calendários - onLoad
$arr_fields = ['smtp_server', 'smtp_email', 'smtp_user', 'smtp_pswd'];
sc_float_label($arr_fields);
Formulários múltiplos registros, grid editável e grid editável (view) - onLoadRecord
$arr_fields = ['mod', 'icon'];
sc_float_label($arr_fields, $sc_seq_vert);
# sc_back_to_top
sc_back_to_top(position)
Esta macro cria um botão, no margem inferior durante o rolamento da página, redirecionando para o topo. Através do parâmetro, é possível definir o posicionamento do botão como left ou right.
O uso desta macro é aplicável aos eventos que de carregamento da página como onExecute, onLoad e onScriptInit.
Esta macro requer o uso da biblioteca interna backTop.php, que por padrão vem habilitada.
Desabilite a opção Exibir output Ajax nas configurações da aplicação.
# Parâmetros
| Parâmetro | Descrição | Tipo | |
|---|---|---|---|
| position | Este parâmetro irá receber o valor da posição. (left/right) Na ausência do parâmetro, o valor padrão é right. | string | Opcional |
# Exemplos
Consulta - onScriptInit
sc_back_to_top();
Formulário - onLoad
sc_back_to_top("left");
# sc_add_notification
sc_add_notification(type, rec_type, receiver, text, link, sender)
Esta macro permite o envio de mensagens de alerta ou eventos do sistema. Através dos parâmetros é possível determinar para quais usuários e departamentos a mensagem será exibida.
Esta macro requer o uso da biblioteca interna notification.php, que por padrão vem habilitada.
# Parâmetros
| Parâmetro | Descrição | Tipo | |
|---|---|---|---|
| type | Este parâmetro define o tipo da mensagem enviada. Onde, poderá ser enviada como uma mensagem de alerta(alert) ou um evento do sistema(event). Eventos do sistema podem ser definidos como situações comuns em que o usuário será notificado. Como, por exemplo seria um cadastro de um novo usuário ou conclusão de um pedido. Para isso, utilize o valor "event". Mensagens de alerta podem ser definidas como situações que requer a intervenção de um administrador para notificar um usuário ou um grupo de usuários. Para isso, utilize o valor "alert". | string | Obrigatório |
| rec_type | Este parâmetro define para quem a mensagem será enviada. Podendo ser all_users para todos os usuários, group para um ou mais grupos de usuários e user para um ou mais usuários. Para group e user é necessário que o parâmetro receiver seja de departamento(s) ou usuário(s). Caso o parâmetro utilizado seja all_users, o parâmetro receiver pode ser ignorado. | string | Obrigatório |
| receiver | Este parâmetro somente tem efeito quando aplicado juntamento com o parâmetro rec_type passando os valores group ou user. Caso contrário, pode ser desprezado passando o parâmetro como NULL. | integer ou string | Obrigatório |
| text | Este parâmetro define o conteúdo da mensagem que será enviada. | string | Obrigatório |
| link | Este parâmetro recebe uma aplicação como parâmetro e permite que a mensagem seja exibida com um link apontando para a aplicação definida. É essencial para uma boa experiência do usuário, que o usuário tenha privilégios de acesso para a aplicação que foi definida. | string | Obrigatório |
| sender | Este parâmetro define qual foi o usuário que enviou a mensagem, o remetente. | integer ou string | Obrigatório |
# Exemplo
switch ({receiver_type}) {
case "all_users":
$receiver = null;
break;
case "group":
$receiver = {receiver_group};
break;
case "user":
break;
default:
$receiver = null;
break;
}
$sender = null;
if (isset([usr_login])) {
$sender = [usr_login];
}
sc_add_notification({type}, {receiver_type}, $receiver, {text}, {link_app}, $sender);
