Expandir Macros nas Consultas à Lista de Conteúdo

Em uma consulta de lista de conteúdo, você pode definir valores para propriedades que são calculadas quando uma página é executada para exibir o conteúdo recém-atualizado.

A maioria das propriedades dos componentes nos sites é estática. O usuário seleciona ou digita uma string ou um valor fixo para uma das propriedades do componente e isso não muda, independentemente de quando ou onde a página seja executada. No entanto, você pode definir valores para propriedades que são calculadas quando uma página é executada. Isso é útil para exibir conteúdo que foi atualizado recentemente nas consultas de conteúdo. Os usuários podem digitar datas como "nos últimos 3 dias".

Você pode inserir uma expansão Mustache JS para diversas propriedades. Os valores referenciados nessas strings são derivados de um modelo que é executado quando a página é executada. Um modelo predefinido manipula datas formatadas para chamadas de API REST de Conteúdo. Você pode estender esse modelo com valores adicionais para atender a qualquer requisito do usuário.

Este é um exemplo da string que você pode digitar para uma propriedade:

Content List component:
      Additional Query String property:
             updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"

Essa entrada Mustache para a data será avaliada no runtime; assim, o valor retornado muda dependendo de quando é executado (isto é, expande para updatedDate gt "2220181002060000000"). Dessa maneira, o usuário pode elaborar qualquer string de data complexa, em vez de ter de digitar um valor predefinido.

Propriedades Suportadas do Componente

As seguintes propriedades suportam a sintaxe do modelo Mustache JS:

  • Lista de Conteúdos

    • String de Consulta Adicional

    • Por exemplo: updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"

  • Título/Parágrafo/Texto

    • Rich text digitado via CKEditor

    • Por exemplo: "Content REST API format for date: {{#content.date}}now{{/content.date}}"

Nota:

Sem um modelo personalizado para o modelo Mustache, a expansão em Título/Parágrafo/Texto não é tão útil. No entanto, é muito útil para validar o que você digita na String de Consulta Adicional, porque será avaliado conforme você alterna entre edição e exibição e ficará imediatamente visível.

Sintaxe Suportada do Componente

O objeto content.date é suportado predefinido. Isso aceita dois parâmetros principais, today e now.

O valor today assume o horário atual do browser, converte-o em meia-noite de hoje e, em seguida, converte esse valor no horário UTC.

  • {{#content.date}}today{{/content.date}} expande para o valor do browser na meia-noite de hoje, convertido no valor do UTC e formatado no formato de data da API REST de Conteúdo. Por exemplo:

    2220181008065959999
  • Ele então pode ser aumentado com:

    today +/-  [day | week | month | year]
  • O valor today também se comporta de forma diferente quando você adiciona ou subtrai dele. Se você subtrair dele, ele usará o horário da manhã. Se você adicionar a ele, ele usará o horário da meia-noite. Por exemplo:

    • {{#content.date}}today - 1 day{{/content.date}} expande para ontem no início do dia.

    • {{#content.date}}today + 2 days{{/content.date}} expande para depois de amanhã à meia-noite.

O valor now assume o horário atual do browser e converte-o no horário UTC sem qualquer ajuste.

  • {{#content.date}}now{{/content.date}} expande para o horário atual do browser convertido no valor do UTC e formatado no formato de data da API REST de Conteúdo.

  • now também pode ser aumentado com hour. Então, você tem:

    now +/-  [hour | day | week | month | year]
  • Por exemplo:
    • {{#content.date}}now + 2 hours{{/content.date}} - duas horas a partir de agora convertidas no horário UTC, no formato de data da API REST de Conteúdo

    • {{#content.date}}now - 1 day{{/content.date}} - ontem neste horário do browser convertido no horário UTC, no formato de data da API REST de Conteúdo

Usando a Sintaxe Suportada do Componente

Para usar a macro expansão na string de consulta adicional, supondo que você queira retornar tudo nas últimas 3 semanas, você digitaria o seguinte:

updatedDate gt "{{#code.date}}today - 3 weeks{{/code.date}}"

Somente a data é retornada; então, para funcionar na chamada da API REST de Conteúdo, aspas são adicionadas quando você constrói a string de consulta, como faria ao digitar um valor estático.

MustacheJS

Para obter a sintaxe, consulte as páginas de modelos Mustache JS em mustache.github.io/mustache.5.html.

Foi feita uma alteração na instância Mustache que é executada ao expandir as strings. O Mustache fornece uma expansão text que usa {{ }} e uma expansão html que usa {{{ }}}. A diferença entre as duas é que a expansão de texto faz uma codificação HTML na string, ou seja, se o valor fosse expandido para a < b, o resultado seria a &lt; b. Não é o que você gostaria para construir strings de URLs. Você poderia instruir o usuário a usar a expansão HTML, mas isso tem um custo e gerará mais problemas, como explicar por que é preciso usar {{{ }}}.

Para evitar isso, o Mustache foi configurado para que não escape valores ao usar {{ }}. Isso significa que {{ }} e {{{ }}} se comportam da mesma maneira. Isso também deixa a codificação de qualquer resultado como teste para o usuário se for necessário.

O Modelo Mustache do OOTB

O Mustache exige que um exemplar seja aplicado ao modelo para expansão. No exemplo anterior, {{#content.date}} já está definido pronto para uso, enquanto uma nova propriedade, como {{person}}, pode ser adicionada pelo desenvolvedor. Se o usuário digitar um valor no modelo Mustache que não está no exemplar, o resultado será uma string vazia. Assim, no caso de Hello {{person}}, expandiria para apenas Hello , a menos que o desenvolvedor adicionasse person ao exemplar.

O objeto modelo usado é um objeto global chamado SCSMacros. O desenvolvedor é livre para adicionar qualquer entrada a mais nesse objeto. O objeto será transmitido ao Mustache quando o modelo for avaliado.

O objeto modelo predefinido só aceita atualmente o objeto content.date:

{   
   content: {
     date: <lambda implementation>
   }
}

Modelo Mustache Personalizado

Os objetos suportados podem ser aprimorados pelo desenvolvedor com base nos requisitos. Por isso, eles podem introduzir um objeto lastTwoDays e simplificar a expansão para apenas {{lastTwoDays}}.

Para estender o modelo para suportar algo como Hello {{person}} no exemplo anterior, você precisaria adicionar o objeto person ao SCSMacros. Faça isso antes da execução da página. Pode ser feito no layout da página adicionando uma tag de script ao início dela. Por exemplo:

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
window.SCSMacros.person = "World";
</script>

Depois de fazer essa alteração, o modelo Hello {{person}} expandiria para: Hello World.

Se você quiser transmitir valores ao objeto (por exemplo, Hello {{#person}}personId{{/person}}), implemente um mustache lambda, encapsule e expanda o valor na implementação.

Por exemplo:

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
//implement "person" as a lambda
window.SCSMacros.person = function () {
  var people = { '111': { firstName: 'Small', lastName: 'World'}, '222': { firstName: 'Big', lastName: 'Universe'} };  
  return function (text, render) {     
     var expandedText = render(text);
     var chosenPerson = people[expandedText] || people['111'];      
     return chosenPerson.firstName;
  }
};
</script>

Depois que essa alteração é feita, o modelo Hello {{#person}}111{{/person}} expande para Hello Small e o modelo Hello {{#person}}222{{/person}} expande para Hello Big.

Nota:

A expansão Mustache é executada de maneira síncrona. Se você precisar recuperar valores assíncronos, elas precisarão ser resolvidos dentro do exemplar antes de você tentar executar a expansão mustache, mas isso não é suportado no momento, embora implementações personalizadas sejam possíveis.