Como lidar com HTML ID’s dentro do Outsystems
Não sei se você já passou por essa situação, mas um novo membro da comunidade me perguntou sobre HTML ID’s dentro da plataforma e isso me fez recordar quando eu iniciei na plataforma. E naquela época quando me explicaram existia dois sentimentos no ar , o primeiro é que só existe um jeito e que o HTML é bem mais simples, e o segundo será que tem que ser desse jeito mesmo ?
Desde que eu entrei no mundo low code me deparo com comentários como: Não tem como, low code não foi feito para isso, você não consegue construir sistema complexos com isso. Mas graça ao bom Deus que esses comentários existem, porque depois de um certo ponto, eu pude compreender que foi isso que me levou cada vez mais longe, que me fizeram vencer as limitações as quais a forma convencional de codificar indaga. Agora , pega a visão, na verdade não existe limitações, isso é apenas desculpas que outros dão, porque não são capazes de voar mais longe e como diria Tom Cruise o filme TOP GUN: Não é o avião e sim o piloto.
Desmistificando ID’s no Outsystems
Primeiro, para que serve ID’s no HTML ?
Se você pesquisou no W3School assim como eu fiz, encontrou esse dois propósitos:
O atributo `id` especifica um id exclusivo para um elemento HTML. O valor do atributo id deve ser exclusivo no documento HTML.
O atributo `id` é usado para apontar para uma declaração de estilo específica em uma folha de estilo. Também é usado pelo JavaScript para acessar e manipular o elemento com o id específico.
Traduzindo para linguagem popular, é um identificação para um elemento (div, span, p ) da página ou seja um CPF que eu consigo identificar aquele elemento dentre outros para poder manipula-lo via Javascript ou CSS.
Agora que sabemos para que serve os ID’s no HTML, vamos avançar mais um pouco nessa jornada com nosso segundo passo:
Como declaro ID’s no Outsystems ?
No Outsystems não tem como declarar ID’s na mão igual ao HTML, porque essa propriedade são geradas em RUNTIME (tempo de execução), contudo isso é um preço a se pagar, pelas outras facilidades, porém existe um forma de capturar esses valores gerados em RUNTIME.
Para conseguir capturar esse valor gerado em RUNTIME como descrito na image acima, pois é o atributo Read Only (apenas de leitura), precisamos nomear o componente/elemento dentro do Outsystems na propriedade Name :
Depois desse pequeno passo, você conseguira referenciar o elemento meu_container_com_id e ler o atributo ID. Para isso criei um Client Action chamada MinhaAction com o parâmetro de entrada chamado WidgetId (ID do container em HTML).
Criei um botão para essa ação e como vocês podem reparar agora posso referenciar o atributo ID do elemento a qual eu nomeie. Isso pode ser referenciado tanto no Widget Tree quando dentro de Client Actions ou Screen Actions.
Com isso conseguiremos manipular nossos elementos via JavaScript, contudo não conseguiremos fazer isso no CSS, mas calma, para tudo tem um jeito. O principal propósito de usar ID’s é para manipulação de elementos usando Javascript e não para estilização, então se quiser referenciar isso no seu CSS, crie um classe para seu elemento e referencie no seu CSS.
Indo um pouco mais além
Por que um assunto tão simples rendeu tanto para ser explicado ? simples, a medida que nosso conhecimento aumenta, descobrimos outras formas de fazer a mesma coisa de maneira mais eficiente. Então para complementar tudo que foi dito acima vamos falar mais duas forma de capturar elementos que tem a mesmo propósito que o atributo `id`.
Classes
Como disse no final do tópico anterior é possível criar marcações para seus elementos usando classe do CSS, que você obterá o mesmo comportamento do atributo ID. Exemplo :
Crie a classe no elemento que quer referenciar
Depois que criar a classe, basta referenciar com mesmo nome no seu CSS
Para capturar esse elemento basta usar Javascript para referenciando o nome da classe também :
Atributos Customizados
Outra forma de obter o mesmo comportamento dos ID’s é através de atributos HTML customizados. Então vamos ao exemplo :
Crie um elemento e nas propriedades do elemento crie um atributo customizados e informar qualquer valor.
Depois de criar o atributo customizado, você será capaz de referencia-lo através de CSS Selector (Coloquei dois exemplo de como fazer) conforme imagem abaixo :
Para capturar esse elemento basta usar Javascript para referenciando os atributos customizados também :
Conclusão
Não é por que uma coisa funciona de uma forma simples em um determinado lugar que ela tem que funcionar do mesmo jeito em qualquer lugar. O que eu quero dizer com isso ? É que cada linguagem ou plataforma tem suas particularidades, assim como o português que é a única lingua que possui a palavra saudade não quer dizer que eu não consiga dizer isso em inglês que a junção de palavras que forma um contexto : I miss you.
É isso seus lindos, espero que tenham gostado e por favor ajuda euuu, deixa um palminha 👏🏻👏🏻👏🏻 ai do lado 👊🏻😎 #TMJ
