Manual de Customização » Devcenter - Customizar... » Listagem do Formulário...
Export

Listagem do Formulário - customizar com HTML, C#, CSS e Javascript

O agilityflow permite customização através da Linguagem Html, CSS, Javascript e C# (csharp).

O html do agilityflow é baseado no Razor do framework .Net, isso é, você pode além de customizar com HTML, utilizar código C# (razor) para dar mais flexibilidade e poder ao seu componente Html.

Customizar a Listagem

Acesse a parte de Desenvolvimento do Formulário que você deseja customizar, para isso, entre na área de customização de um formulário e clique na opção Visual Code Editor, como na imagem abaixo:

Nessa área você poderá customizar a parte de Cadastro e de Listagem utilizando, Javascript, CSS e CSHTML (Razor C# + Html):

Para essa documentação vamos nos preocupar com a área de "List Page".

Nessa área podemos customizar toda página de Listagem Principal de dados, como no exemplo abaixo.

Voltando a área de desenvolvimento, no menu de customização da List Page, teremos sempre 2 arquivos padrões: CSS e Javascript.

O CSS é sempre colocado no topo da página, dentro da tag <HEAD> do Html

O Javascript é sempre colocado no final da página, antes do fechamento do </Body>

Customizar com CSS

Todo código CSS da página de Listagem Principal do Formulário, deve ficar no arquivo CSS da List Page.

Nessa área, você pode criar customizações via linguagem CSS para toda a listagem e o seu uso é livre.

Levar em consideração o tratamento em CSS para a responsividade da plataforma em outros device, Mobile, Computador Desktop, Tablet, etc.

CSS no Formulário Filho

O CSS feito para a página de Listagem Principal está colocado apenas no List Page do próprio formulário filho, dessa forma ele não será adicionado ao Formulário Pai, então para usar CSS nas tabelas que estão dentro de um formulário Pai, você deve entrar dentro da área de desenvolvimento do Formulário Pai abrir o arquivo CSS e ao invés de colocar no CSS da aba List Page, coloque o código na aba Form Page do formulário pai.

Customizar com Javascript

Todo código Javascript da página de Listagem Principal do Formulário, deve ficar no arquivo Javascript da List Page.

O agilityflow possui uma extensa biblioteca de funções prontas para customização em Javascript que você pode utilizar para diminuir o seu tempo de desenvolvimento.

Além disso nessa parte você está livre para criar funções e regras da forma que for mais conveniente.

O agilityflow disponibiliza uma biblioteca principal em Javascript para a tela de Listagem Princpal. Essa biblioteca está disponível no objeto "listContext" e abaixo estão descritos as propriedades e métodos pré-programados para facilitar na utilização:

Para utilizar qualquer método ou propriedade listadas abaixo, sempre utilizar antes a nomenclatura "listContext.". Exemplo: listContext.Metodo() ou listContext.Propriedade

Javascript - Bloquear e Desbloquear a abertura do lightbox do Formularío ao clicar na linha do grid
void blockLinkOpening()
para bloquear a abertura do link ao clicar na linha do grid
void unlockLinkOpening()

 para desbloquear o bloqueio a abertura do link ao clicar na linha do grid

Exemplo de uso

$(document).on('click', '.btn-exemplo-botao', function (e) {

    //bloqueia a abertura da tela de visualização do formulário
    listcontext.blockLinkOpening();

    //aqui você pode colocar seu código
    //apresenta uma mensagem
    alert('Mensagem de Exemplo')
    
    //desbloqueia a abertura da tela de visualização do formulário
    listcontext.unlockLinkOpening(false);
})
Javascript - Idioma, Linguagem / Internationalization (i18n)
currentLanguage.isEnglish()
 retorna true se for inglês
currentLanguage.isPortuguese()
 retorna true se for português
currentLanguage.isSpanish()
 returna true se for espanhol
currentLanguage.getIIF_TextFromCurrentLanguage(text_ptBR, text_ENG ,text_ESP)
 dependendo do idioma, retorna o texto passado em 1 dos 3  parâmetros
currentLanguage.getNumberDecimalSeparator()
Se NAO for Brasil, retorna ".", pois o formato do número é assim: 999,999,999.999
 
Se for Brasil, retorna ",", pois o formato do número é assim: 999.999.999,999
Javascript - Conversão e Formatação de Números
   
number.convertString_toNumber(strValueToConvert, [optional]qtdCasasDecimais) 
//Converte número formatado no idioma atual para um formato numérico javascript, limpo sempre com ponto como separador decimal

//se for ingles substitui virgula por nada e mantem o ponto como separador decimal
var z = listContext.number.convertString_toNumber("100,999.53");
console.log(z);
//result: 100999.53

//se for portugues substitui ponto por nada e virgula por ponto como separador decimal
var z = listContext.number.convertString_toNumber("100.999,53");
console.log(z);
//result: 100999.53
number.convertNumber_toStringFormatted(numberToConvert,qtdCasasDecimais) 
//formata o numero, dependendo do idioma
var z = listContext.number.convertNumber_toStringFormatted(100999.50);
console.log(z);
//result: 100,999.50 ou 100.999,50 dependendo do idioma
number.getNumberDecimalSeparator()
Se NAO for Brasil, retorna ".", pois o formato do número é assim: 999,999,999.999
 
Se for Brasil, retorna ",", pois o formato do número é assim: 999.999.999,999

 

Javascript - Data
datetime.getDateNow() data atual, retorna objeto Date do Javascript
datetime.getFormattedDateTime() retorna data no formato 'DD/MM/YYYY'
datetime.getFormattedDate()
retorna 'DD/MM/YYYY HH:mm'
datetime.getLastDayOfCurrentMonth()
último dia do mês atual, 
retorno será 'DD/MM/YYYY'
datetime.getLastDayOfMonth(data)
último dia do mês da data passada como parâmetro
passar a data ano formato 'DD/MM/YYYY'
retorno será 'DD/MM/YYYY'

 

Javascript -Validação e Comparação entre Datas
datetime.validation.isCurrentMonthAndYear(data)
verifica se a data é do mês e ano corrente
passar data no formato 'DD/MM/YYYY'
datetime.validation.compare(date1,compare,date2)
Comparação entre 2 datas
Passar as datas (date1 e date2) no formato 'DD/MM/YYYY'
O parâmetro compare pode ser:
 
Usar assim
Ou usar assim
Maior que
'greater'
'>'
Maior ou igual
'greater-or-equal'
'>='
Menor que
'less'
'<'
Menor ou igual
'less-or-equal'
'<='
Igual
'equal'
'=='
datetime.validation.compareToday(compare,date2)
Comparação entre a data passado por parametro com a data atual
Passar as data (date2) no formato 'DD/MM/YYYY'
O parâmetro compare pode ser:
 
Usar assim
Ou usar Assim
Maior que
'greater'
'>'
Maior ou igual
'greater-or-equal'
'>='
Menor que
'less'
'<'
Menor ou igual
'less-or-equal'
'<='
Igual
'equal'
'=='

 

Javascript - Manipular Datas 
datetime.add.day(data, days)
Adicionar dias a uma data
passar data no formato 'DD/MM/YYYY'
retorno será 'DD/MM/YYYY'
datetime.add.month(data, months)
Adicionar meses a uma data
passar data no formato 'DD/MM/YYYY'
retorno será 'DD/MM/YYYY'
datetime.add.year(data, years)
Adicionar anos a uma data
passar data no formato 'DD/MM/YYYY'
retorno será 'DD/MM/YYYY'
datetime.add.hour(data, hours)
Adicionar horas a uma data
passar data no formato 'DD/MM/YYYY HH:mm'
retorno será 'DD/MM/YYYY HH:mm'
datetime.add.minute(data, minutes)
Adicionar minutos a uma data
passar data no formato 'DD/MM/YYYY HH:mm'
retorno será 'DD/MM/YYYY HH:mm'
Javascript - Outros
isMobile
retorna true caso seja mobile
Javascript no Formulário Filho: Customizar com Javascript a tabela que está dentro de um Formulário Pai

O Javascript feito para a página de Listagem Principal está colocado apenas no List Page do próprio formulário filho, dessa forma ele não será adicionado ao Formulário Pai, então para usar Javascript nas tabelas que estão dentro de um formulário Pai, você deve entrar dentro da área de desenvolvimento do Formulário Pai abrir o arquivo Javascript e ao invés de colocar no Javascript da aba List Page,  coloque o código na aba Form Page do formulário pai.

Atenção: o objeto listContext não está presente no Formulário Pai, ver detalhes mais abaixo para o uso das funções semelhantes

As funções e biblioteca citadas acima não estão presentes da mesma forma no caso de tabelas/listagens filhas e que estarão dentro de um formulário Pai.

A mudança mais impactante é que o listContext não está presente, sendo assim você deve utilizar as funções Javascript descritas nesse link na documentação do formContext e formcontext.childform que são funçoes da tela de Formulário

Javascript - Bibliotecas de terceiros

Abaixo estão listadas as biblioteca javascript que já estão importadas na página do formulário:

jquery v1.11.3
bootstrap
moment
guid
jquery.inputmask/4.0.0-beta.19
bootstrap-daterangepicker

 

Customizar as Colunas da Listagem

No Dev, no menu "Customizar Colunas (Cshtml)" você pode adicionar para cada coluna um arquivo de customização, o arquivo sempre deve ter o mesmo nome do ID do campo/coluna no formulário. 

O arquivo de customização sempre deve ter o mesmo nome do ID do campo/coluna no formulário

 

Para esse exemplo, considere um Formulário chamado  "Exemplo de Listagem Customizada" com o seguintes campos:

Nome Id do campo Tipo de Campo
Data e Hora data_e_hora Campo com máscara Data e Hora
Decimal com 2 Casas decimal_2casas Campo Número - Decimal com 2 casas
Decimal com 3 Casas decimal_3casas Campo Número - Número Decimal com 3 casas
E-mail email Campo de Texto
Nome nome Campo de Texto
Idade idade Campo Número - Inteiro

Foram adicionados campos NUMÉRICOS e de DATA para mostrar como você pode utilizar esse tipo de informação para fazer condicionais  com essas informações.

Agora entra na área de listagem e coloque os seguintes campos:

Repare que na listagem eu adicionei os campos de Log, "Data criação" e "Criado Por". Esses são campos gerados automaticamente pelo Agilityflow, e você também pode utilizar essas informações na customização das colunas.

Agora volte para a área de customização:

 

Agora precisamos criar os arquivos de customização para cada coluna.

Crie através do botão NOVO CSHTML um arquivo para cada coluna que incluímos na listagem. Para isso, utilize o id da coluna como o nome do arquivo. Suas configurações devem estar como na imagem abaixo:

Antes de mostrar cada exemplo, abaixo descrevemos alguns métodos e propriedades disponíveis no contexto de cada customização de coluna, para que você consiga entender o que podemos fazer.

Propriedade e Métodos C# disponíveis no contexto do CSHTML da Coluna

O agilityflow disponibiliza uma biblioteca C# de contexto para a customização das colunas. Essa biblioteca está disponível no objeto "ColumnContext" e abaixo estão descritos as propriedades e métodos pré-programados para facilitar na utilização:

Para utilizar qualquer método ou propriedade listadas abaixo, sempre utilizar antes a nomenclatura "ColumnContext.". Exemplo: ColumnContext.Metodo() ou ColumnContext.Propriedade

C# - Propriedades
string FormId Id do registro, pode ser em branco ou nulo qdo for um rascunho
bool IsRascunho {get;} Retorna true caso a linha seja um Rascunho
string DraftId Id do rascunho
int RowIndex {get;} Retorna a posição da Linha na tabela, começando do 0

 

C# - Recuperar (Get) valor das colunas
string GetText(string idColuna)

Retorna uma string com o texto da coluna passada no parâmetro

 

Essa função já traz o campo formatado com a máscara que está definida no Formulário. Por exemplo, caso seja um campo decimal, ele já trará o valor formatado de acordo com o idioma 10.000,00 ou 10.000,00 (caso você precise utilizar esse valor em alguma soma ou condicional ,utilize o método GetDecimal ao invés de GetText)
string GetValue(string idColuna)

retorna o ID ao invés do Texto.

 

* Apenas para campos que sejam uma Lista Dinâmica, Lista Estática, Checkbox ou um campo que tenha como apresentação um Texto de outra Base de Dados mas por trás esse campo é um ID.

* caso não encontre ou o valor seja nulo retorna em branco ao invés de null
int? GetInt(string idColuna)

Retorna o valor da coluna no tipo INT (inteiro), caso esse campo no formulário seja um número, se o valor for 10.000,99

Será retornado: 10000

 
decimal? GetDecimal(string idColuna) Retorna o valor da coluna no tipo Decimal, caso esse campo no formulário seja um número, se o valor for 10.000,99

Será retornado: 10000.99
DateTime? GetDateTime(string idColuna) Retorna o valor da coluna no tipo DateTime para valores que estão no formato de data dd/MM/yyyy ou dd/MM/yyyy hh:mm

DICA: Nos métodos acima só estarão disponíveis informações dos campos que foram marcados para aparecer na listagem. Caso você precise usar uma informação mas não quer que ela se torne uma coluna da lista, adicione ela como disponível na listagem e marque ela como invisível. Veja mais detalhes aqui

 

C# - Customização visual da coluna ou linha
void SetCelColor(string color)

Pinta o fundo da célula da coluna

Algumas cores já estão predefinidas seguindo padrão de tonalidade do agilityflow. Essas cores são: "red", "green", "yellow", "blue". Caso você julgue necessário você também pode utilizar cores no formato hexadecimal
void SetRowColor(string color)

Pinta o fundo da linha da linha

Algumas cores já estão predefinidas seguindo padrão de tonalidade do agilityflow. Essas cores são: "red", "green", "yellow", "blue". Caso você julgue necessário você também pode utilizar cores no formato hexadecimal

 

C# - Variáveis Globais no contexto da listagem

Você pode precisar guardar informações no contexto geral da listagem.

Imagine que você queira fazer uma soma geral ou guardar uma informação que você já tratou na primeira linha e que agora você precisa utiliza-la na última coluna, da última linha. Simples, basta utilizar o método SetGlobalVariable para colocar uma informação no contexto e depois busca-la com o método GetGlobalVariable para 

void SetGlobalVariable(string key, string value) Colocar uma variável e seu valor no contexto da listagem
string GetGlobalVariable(string key) Recupera o valor de uma variável que esteja no contexto da listagem

 

C# - Formatação Numérica

Se você está utilizando o método GetText(..) para buscar uma coluna numérica, esse metódo já retornará o número formatado e não será necessário nenhuma formatação adicional.

Se você está utilizando o método GetDecimal(..) ele não virá formatado pois ele retorna o tipo DECIMAL do C#, sendo assim, se você precisa do dado formatado você pode utilizar o GetText(..)

string FormatDecimalToString(object numDecimal, string mascaraTipo = "dec2")

formata object 999999999.55 para o formato da mascara de acordo com o idioma.

 - se for ingles, será 999,999,999.55
 - se for portugues, será 999.999.999,55
string FormatNumberToString_EnglishFormat(object num, [optional]int? qtdCasasDecimais)

converte decimal para string, porém sempre a string vem no formato Inglês.

coloca a a mesma qtd de casas decimais, caso o parâmetro qtdCasasDecimais estivar em branco

 

 

C# - Usuário logado
string GetUsuarioLogadoNome() retorna o nome do usuário logado
string GetUsuarioLogadoPrimeiroNome() retorna o primeiro nome do usuário logado
string GetUsuarioLogadoPrimeiroESegundoNome() retorna o primeiro e o segundo nome do usuário logado
string GetUsuarioLogadoEmail() retorna o e-mail do usuário logado
Guid GetUsuarioLogadoId() retorna o id do usuário logado
 
C# - Idioma, Linguagem / Internationalization (i18n)
CurrentLanguage.IsEnglish()
 retorna true se for inglês
CurrentLanguage.IsPortuguese()
 retorna true se for português
CurrentLanguage.IsSpanish()
 returna true se for espanhol
CurrentLanguage.GetIIF_TextFromCurrentLanguage(text_ptBR, text_ENG ,text_ESP)
 dependendo do idioma, retorna o texto passado em 1 dos 3  parâmetros
 
C#  - Geral
string GetUrlBase() Retorna a URL base onde o agilityflow está instalado
string GetEnvironmentVariable(string nomeDaVariavel) Retorna o valor de uma variável de ambiente
string GetEnvironmentVariable_Text(string nomeDaVariavel) Retorna o texto de uma variável de ambiente

 

Elementos Visuais para deixar a tabela mais bonita

Você pode utilizar qualquer elemento HTML para a customização da coluna.

Abaixo listamos alguns elementos pré-definidos no agilityflow para facilitar o seu desenvolvimento.

* Caso seja necessário criar um elemento visual de forma dinâmica ou dentro de um IF, usar a função Html.Raw(), como no exemplo abaixo:

Button 

<button type="button" class="btn-list">Botão</button>
Small Text 

<text-small>small</text-small>
Tag Red 

<tag-red>red</tag-red>
Tag Outline Red 

<tag-outline-red>red</tag-outline-red>
Tag Yellow 

<tag-yellow>yellow</tag-yellow>
Tag Outline Yellow 

<tag-outline-yellow>yellow</tag-outline-yellow>
Tag Blue 

<tag-blue>blue</tag-blue>
Tag Outline Blue 

<tag-outline-blue>blue</tag-outline-blue>
Tag Green 

<tag-green>green</tag-green>
Tag Outline Green 

<tag-outline-green>green</tag-outline-green>
Tag gray 

<tag-gray>gray</tag-gray>
Tag Outline gray 

<tag-outline-gray>gray</tag-outline-gray>
Avatar 

<avatars><avatar>John Charles</avatar></avatars>
Avatar 

<avatars><avatar>Luigi Charles</avatar><avatar>Brain Colleman</avatar></avatars>
Rating 

<star-rating max="4" show-value="false">3</star-rating>
Rating 

<star-rating max="6" show-value="true">3.5</star-rating>
Rating Red 

<star-rating color='red' max="7" show-value="false">6</star-rating>
Rating Blue 

<star-rating color='blue' max="7" show-value="false">6</star-rating>
Rating Green 

<star-rating color='green' max="7" show-value="false">6</star-rating>
Rating Gray 

<star-rating color='gray' max="7" show-value="false">6</star-rating>
Rating Ball 

<ball-rating max="4" show-value="false">3</ball-rating>
Rating Ball 

<ball-rating max="6" show-value="true">3.5</ball-rating>
Rating Ball Red 

<ball-rating color='red' max="7" show-value="false">6</ball-rating>
Rating Ball Blue 

<ball-rating color='blue' max="7" show-value="false">6</ball-rating>
Rating Ball Green 

<ball-rating color='green' max="7" show-value="false">6</ball-rating>
Rating Ball Gray 

<ball-rating color='gray' max="7" show-value="false">6</ball-rating>
Break Line   
<br/>
Line 

<hr/>

 

Exemplos de customização

Agora que já sabemos os métodos que podemos utilizar para facilitar a customização, abaixo listamos alguns exemplos de como utiliza-los na prática.

Comparação por Data e Hora. Pintar a linha e coluna se a data e hora (DateTime) estiver atrasada

No arquivo de customização "data_e_hora", vamos criar uma regrinha:

 - Vamos buscar a data e hora já no tipo DateTime para podermos usar na condicional 
 - Se a data estiver atrasada, colocaremos a linha em vermelho
 - Se faltar até 5 dias a para chegar na data, colocaremos a célula da tabela em amarelo

@{    
    //buscar a data e hora já no tipo Datetime para podermos usar na condicional
    var dt_data_e_hora = ColumnContext.GetDateTime("data_e_hora");

    //se não for possível converter a data, ela sempre retornará null
    if(dt_data_e_hora != null){

        //se está atrasada, coloca em vermelho a linha
        if(dt_data_e_hora  < DateTime.Now){ 
            @ColumnContext.SetRowColor("red")


        //se em até 5 dias for ficar atrasado, coloca em amarelo a célula
        }else if(dt_data_e_hora  < DateTime.Now.AddDays(5)){ 
            @ColumnContext.SetCelColor("yellow")
        }
    }

    //e por fim mostramos a data e a hora na célula
}
    @dt_data_e_hora

resultado:

 

Comparação Numérica e tipos Numéricos

No arquivo de customização "decimal_3casas", vamos criar uma regrinha:

 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele no formato string e usando o método GetText
 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele como tipo inteiro (ignorando as casas decimais) e usando o método GetInt
 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele no tipo decimal e usando o método GetDecimal
 - Vamos fazer uma condicional para mostrar uma tag em verde escrito "é Maior que 10 mil" caso o valor do campo seja maior que 10.000,00
 - Vamos fazer uma condicional para mostrar uma tag em vermelho escrito "é Menor que 10 mil" caso o valor do campo seja menor que 10.000,00

@ColumnContext.GetText("decimal_3casas")
<br>
@ColumnContext.GetInt("decimal_3casas")
<br>
@ColumnContext.GetDecimal("decimal_3casas")
<br>
@{
    if(ColumnContext.GetDecimal("decimal_3casas") > 10000){
        <text>
            <tag-green>é MAIOR que 10 mil</tag-green>
        </text>
    }else{
        <text>
            <tag-red>é MENOR que 10 mil</tag-red>
        </text>
    }
}

resultado:

Coluna Invisível: Como acessar via GetText os dados de um campo do formulário que não está marcado para aparecer como coluna da lista?

Dica:
Apenas campos que estão marcados para serem colunas da lista podem ser acessados através do método ColumnContext.GetText(...),sendo assim se você quer acessar uma informação através do GetText mas não quer que essa informação seja uma coluna, deixe ela invisível para os usuários, seguindo o procedimento abaixo.

Seguindo nosso exemplo, na coluna NOME da listagem, eu quero concatenar o Nome e a Idade do usuário, porém como eu não coloquei a Idade para ser visível na lista, ela não estará acessível se eu não seguir esses passos:

Passo 1. Adicione a coluna NOME na listagem do formulário Cliente
Passo 2. Adicione a coluna IDADE na listagem do formulário Cliente
Passo 3. Desmarque na coluna IDADE as opções "Visível no Mobile" e "Visível no Desktop"
 
Pronto, agora a coluna idade ficará disponível para ser acessar pelo contexto: ColumnContext.GetText("idade")

mas não será uma coluna da Listagem.

 

Adicionar um botão na listagem

No arquivo de customização "email", vamos criar uma regrinha:

 - Vamos mostrar o valor do campo E-mail 
 - Vamos adicionar um botão que quando o usuário clicar apresentará a msg "Mensagem de Exemplo"
 - Para esse exemplo, vamos precisar fazer uso do arquivo padrão "Javascript" do List Page

No arquivo de customização de "email", cole o código abaixo

@ColumnContext.GetText("email") 
<br>
<button type="button" class="btn-list btn-exemplo-botao">Botão</button>

No arquivo Javascript da List Page, cole o código abaixo

$(document).on('click', '.btn-exemplo-botao', function (e) {

    //bloqueia a abertura da tela de visualização do formulário
    listcontext.blockLinkOpening();

    //aqui você pode colocar seu código
    //apresenta uma mensagem
    alert('Mensagem de Exemplo')
    

    //desbloqueia a abertura da tela de visualização do formulário
    listcontext.unlockLinkOpening(false);
})
Formulário Filho: No caso dessa tabela também estar dentro de um Formulário Pai, algumas coisas mudam:

O Javascript feito acima está colocado apenas no List Page da página de Listagem, dessa forma ele não será adicionado ao Formulário Pai, então você deve entrar dentro da área de desenvolvimento do Formulário Pai abrir o arquivo Javascript e ao invés de colocar o código no Javascript da aba List Page, coloque ocódigo abaixo na aba Form Page do formulário pai.

No caso de Formulário Filho dentro de um formulário Pai, não existirá no Javascript a biblioteca listContext pois essa biblioteca só está presenta na tela de lista. Nesse caso precisaremos usar o formContext mas como estamos falando de um Formulário Filho, as funções referente a ele está dentro de formContext.childForm.xxxx()

Código para o mesmo funcionamento do botão mas agora no formulário Pai.
Observe que no código abaixo, além da mudança de local do Javascript, o listContext. foi substituido por formContext.childForm

$(document).on('click', '.btn-exemplo-botao', function (e) {

    //bloqueia a abertura da tela de visualização do formulário
    formcontext.childForm.blockLinkOpening();

    //aqui você pode colocar seu código
    //apresenta uma mensagem
    alert('Mensagem de Exemplo')
    

    //desbloqueia a abertura da tela de visualização do formulário
    formcontext.childForm.unlockLinkOpening(false);
})

Resultado:

Quando o usuário, clicar no botão "Botão" ele receberá essa mensagem:

 

 

 

Como utilizar uma Variável de Contexto ou Variável Global para interagir e armazenar informações entre todas as linhas e colunas da mesma listagem

Para esse exemplo demonstraremos o uso dos métodos ColumnContext.GetGlobalVariable("variavel"); e ColumnContext.SetGlobalVariable("variavel", "valor");

No arquivo de customização "nome", vamos criar uma regrinha:

 - Vamos mostrar o valor do campo Nome, concatenado com a palavra "Nome:"
 - Vamos somar a idade da linha anterior com a linha atual, até a última linha ser a soma total das idades
 - Vamos mostrar uma frase mostrando a posição da linha (RowIndex) concatenada com a idade total somada até aquele  momento

@{
    //recupera o total já gravado em uma variavel global
    var str_idade_total = ColumnContext.GetGlobalVariable("idade");

    //pega a idade referente a essa linha na tabela
  	//já puxa a idade no formato INT (número inteiro) para ser possível 
  	//fazer a soma total sem precisar de conversão de número
    var idade = @ColumnContext.GetInt("idade");

    //se a idade não tiver sido preenchida no formulário, então considera ela como zero
    if(idade == null)
    {
        idade = 0;
    }

    //se a idade total já estiver sido preenchida, então, soma com a idade dessa linha
    //caso contrário ignora pois será o primeiro registro da linha e não precisará ser feito nenhuma soma
    if(!string.IsNullOrEmpty(str_idade_total)){    
        idade = Convert.ToInt32(str_idade_total) + idade;        
    }

    //coloca novamente a soma das idades totais na Variável Global, para ser recuparada na próxima linha
    str_idade_total = idade.ToString();
    ColumnContext.SetGlobalVariable("idade", str_idade_total);
    
}
Nome: @ColumnContext.GetText("nome")
<br>
Até o RowIndex @ColumnContext.RowIndex a Idade era de  @str_idade_total anos

 

 

Customizar e acessar as colunas de Log: Data de criação, Data de Alteração, Criado por e Alterado por.

Para recuperar os campos de Log na listagem através do GetText(...) ou GetDateTime(...) utilizar os ids padrões de cada campo:

Nome ID
Data de criação log_data_criacao
Data de Alteração log_data_alteracao
Criado por log_usu_criacao
Alterado por log_usu_alteracao

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Back to top