⭕️ Customizando o Outsystems UI sem Medo

👋🏻 Oi seus lindos , depois de criar vários layout diferentes para clientes que deseja algo a mais da plataforma. Cheguei ao seguinte entendimento é muito mais fácil usar o Outsystems UI, mesmo que isso implique ter um pouco de perca de performance, quanto aos vários arquivos que são carregados para renderização da página pelo browser/celular. Pois já tive que lutar contra plataformas que usavam JAMStack e diga-se de passagem não é uma luta justo de se travar.

Mais voltando ao assunto, como eu consigo customizar o Outsystem UI sem medo de ser feliz ? Esse é um rolê que apreendi quando descobrir o que era SASS e que o Outsystems UI é feito em SASS e seu código está disponível no github. Você não sabia disso ? Não seu lindo, como diria o filosofo “Só sei que nada sei”. Então vamos lá.

# Welcome to Outsystems UI on Github

Primeiro acesse o github clicando no Link : https://github.com/OutSystems/outsystems-ui , como vocês podem reparar o nosso companheiro de guerra é bem documentado, além de usar coisas nosso querido amigo JS + Typescript e SASS que iremos explorar mais a fundo.

Primeiro vamos usar como exemplo algo bem peculiar que todos já conhecem, que é um checkbox. Porém ele teria que ser customizado para o layout do cliente conforme desenhado pelo time de UI/UX conforme imagens:

Layout Customizado :

Layout default Outsystems UI :

# Explorando o Outsystems UI no Github e customizando de forma rápida e prática.

Primeiro precisamos entender a estrutura do projeto que está no github. Para isso basta acessar a pasta SRC/ e visualizar o readme detalhado das subdivisões do Outsystems UI.

Não irei entrar em detalhes de como rodar esse projeto do Outsystems UI na sua máquina, por que requer um pouco mais de conhecimento frontend e não é nosso intuito perde tempo , né isso !? pois somos low code é isso construa mais com pouco 🤷🏻‍♂️.

Acesse o arquivo que diz respeito ao checkbox padrão conforme imagem :

Após isso, ira visualizar tudo que corresponde ao checkbox no Outsystems UI que quando compilado fica naquele arquivo gigantesco de css.

Não precisa ficar nervoso eu vou traduzir isso para você de uma maneira bem simples, pois SASS nada mais é que um CSS com super poderes ou seja você escreve menos, porém ele precisa ser compilado para virar nosso querido CSS, verboso e cheio de selectors.

Então vamos lá, primeiro o Outsystems UI considera o checkbox aquele elemento html que tem o atributo `[data-checkbox]` . Segundo, em SASS não precisamos ficar repetindo selectors, então, onde você encontrar `&` significa que você está repetindo o selector pai a qual foi aberta a chaves, por exemplo :

[data-checkbox]{
  &:before{...}
  &:hover {
   &:before {...}
  }
}

[data-checkbox]:before {...}
[data-checkbox]:hover:before {...}

Após esse pequeno detalhe, basta analisar o código em SASS e fazer as modificações necessárias, sem precisar usar o inspecionar varias e varias vezes is, por que nesse arquivo contém todo o comportamento do componente, quanto a responsividade , estado ( desabilitado) e acessibilidade.

Explicado tudo isso, para minha solução, como era um componente e eu não queria afetar os outros checkbox, criei um classe de controle e customizei os selectors do Outsystems UI para o meu layout, mantendo a integridade desse widget quanto a responsividade , estado ( desabilitado) e acessibilidade.

.om-dropdown-item [data-checkbox]:checked:before,
.om-dropdown-item [data-checkbox]:before,
.om-dropdown-item [data-checkbox]:hover:before{
 background:unset;
 border-width:var(--border-size-m);
 width:24px;
 height:24px;
 border-color:black;
}

.om-dropdown-item [data-checkbox]:before {
 transition:all 0s;
}

.om-dropdown-item [data-checkbox]:checked:after {
 left: 7px;
 top: 8px;
 border-color:black;
}

# Conclusão

Apreenda a usar as ferramentas que você tem de um perspectiva diferente, pode acelerar ainda mais o seu desenvolvimento, principalmente se você quer ir para próximo nível.

Não tenha medo de não entender nada as vezes como foi dito no começo do artigo “Só sei que nada sei”. Parafraseando da forma correta, pois essa é uma frase reflexiva, Só sei que nada sei sobre SASS, mas ainda vou apreender, Só sei que nada sei de Outsystems, mais ainda vou apreender. Isso é ser humilde, isso é ser um eterno aprendiz.

Eiiiii me ajuda ai vai !? deixa uma palminhaaaa 👋🏻 e clica em seguir para mais conteúdos legais.