Tutorial: Criar comunicação interativa

Criar uma comunicação interativa usando todos os blocos de construção

estilo da comunicação interativa

Este tutorial é uma etapa da série Create your first Interative Communication. É recomendável seguir a série em sequência cronológica para entender, executar e demonstrar o caso de uso tutorial completo.

Depois de criar todos os blocos de construção, como o modelo de dados de formulário, fragmentos de documento, modelos e temas para a versão da Web, você pode começar a criar uma Comunicação interativa.

As Comunicações interativas podem ser entregues por meio de dois canais: Imprimir e Web. Você também pode criar um canal de Comunicação interativa com impressão como o principal. A opção Imprimir como principal para canal da Web garante que o conteúdo, a herança e o vínculo de dados do canal da Web sejam derivados do canal Imprimir. Também garante que as alterações feitas no canal de Impressão sejam sincronizadas no canal da Web. Os autores de Comunicação interativa, no entanto, têm permissão para quebrar a herança de componentes específicos no canal da Web.

Este tutorial o orienta pelas etapas para criar comunicações interativas para canais de Impressão e Web. Ao final deste tutorial, você poderá:

  • Criar comunicação interativa para o canal de impressão
  • Criar comunicação interativa para o canal da Web
  • Crie Comunicações Interativas da Web e Imprimir como Principal

Criar Comunicações Interativas para Impressão e Web sem sincronização

Criar comunicação interativa para o canal de impressão

Esta é a lista de recursos que já foram criados neste tutorial e são necessários ao criar a Comunicação interativa para o canal Imprimir:

Modelo de impressão: create_first_ic_print_template

Modelo de dados de formulário: FDM_Create_First_IC

Fragmentos do documento: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charge_first_ic

Fragmentos de layout: table_lf

Imagens: PayNow e ValueAddedServices

  1. Faça logon na instância do autor do AEM e navegue até Adobe Experience Manager > Forms > Forms & Documents.

  2. Toque em Criar e selecione Comunicação interativa. O assistente Criar comunicação interativa é exibido.

  3. Especifique create_first_ic no campo Title e no campo Name. Selecione FDM_Create_First_IC como o Modelo de dados de formulário e toque em Próximo.

  4. No assistente Canais:

    1. Especifique create_first_ic_print_template como o modelo Imprimir e toque em Selecionar. Certifique-se de que a caixa de seleção Use Print as Principal for Web Channel não esteja marcada.
    2. Especifique Create_First_IC_templates pasta > Create_First_IC_Web_Template como o modelo Web e toque em Selecionar.
    3. Toque em Criar.

    Uma mensagem de confirmação é exibida informando que a Comunicação interativa foi criada com êxito.

  5. Toque em Editar para abrir a Comunicação interativa no painel direito.

  6. Vá para a guia Assets e aplique o filtro para exibir apenas os fragmentos de documento no painel esquerdo.

  7. Arraste e solte os seguintes fragmentos de documento em suas áreas de destino na Comunicação interativa:

    Fragmento do documento Área de destino
    bill_details_first_ic Detalhes da Lista
    customer_details_first_ic Detalhes do cliente
    bill_summary_first_ic Resumo da Lista
    summary_charge_first_interative_communication Encargos

    create_first_ic_doc_fragments

  8. Toque em Charts área de destino e toque em + para adicionar um componente Chart.

  9. Toque no componente Gráfico e selecione configure_icon (Configurar). As propriedades do gráfico são exibidas no painel esquerdo:

    1. Especifique um nome para o gráfico.
    2. Selecione Pizza na lista suspensa Tipo de Gráfico.
    3. Selecione a propriedade calltype do tipo de objeto calls do modelo de dados na seção X-axis. Toque em done_icon.
    4. Selecione Frequency na lista suspensa Function.
    5. Selecione a propriedade calltype do tipo de objeto calls do modelo de dados na seção Y-axis. Toque em done_icon.
    6. Toque em done_icon para salvar as propriedades do gráfico.

  10. Vá para a guia Assets e aplique o filtro para exibir apenas os fragmentos de layout no painel esquerdo. Arraste e solte o fragmento de layout table_lf na área de destino Chamadas discriminadas.

  11. Selecione o Campo de texto na coluna Date e toque em configure_icon (Configurar).

  12. Selecione Objeto do Modelo de Dados na lista suspensa Tipo de Vínculo e selecione chamadas > calldate. Toque em done_icon duas vezes para salvar as propriedades.

    Da mesma forma, crie a vinculação com calltime, callnumber, callduration e callcharge para campos de texto no Time, Number, <a1 2/>Colunas Duration e Charges , respectivamente.

  13. Toque na área de destino PayNow e toque em + para adicionar um componente Image.

  14. Toque no componente Imagem e selecione configure_icon (Configurar). As propriedades da imagem são exibidas no painel esquerdo:

    1. Especifique PayNow como o nome da imagem no campo Nome.
    2. Toque em Fazer upload, selecione a imagem salva no sistema de arquivos local e toque em Abrir.
    3. Toque em done_icon para salvar as propriedades da imagem.

  15. Repita as etapas 13 e 14 para adicionar a imagem ValueAddedServices à área de destino ValueAddedServices.

Criar comunicação interativa para o canal Web

Esta é a lista de recursos que já foram criados neste tutorial e são necessários ao criar a Comunicação interativa para o canal da Web:

Modelo da Web: Create_First_IC_Web_Template

Modelo de dados de formulário: FDM_Create_First_IC

Fragmentos do documento: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charge_first_ic

Imagens: PayNowWeb e ValueAddedServicesWeb

  1. Faça logon na instância do autor do AEM e navegue até Adobe Experience Manager > Forms > Forms & Documents.

  2. Toque em Criar e selecione Comunicação interativa. O assistente Criar comunicação interativa é exibido.

  3. Especifique create_first_ic no campo Title e no campo Name. Selecione FDM_Create_First_IC como o Modelo de dados de formulário e toque em Próximo.

  4. No assistente Canais:

    1. Especifique create_first_ic_print_template como o modelo Imprimir e toque em Selecionar. Certifique-se de que a caixa de seleção Use Print as Principal for Web Channel não esteja marcada.
    2. Especifique Create_First_IC_templates pasta > Create_First_IC_Web_Template como o modelo Web e toque em Selecionar.
    3. Toque em Criar.

    Uma mensagem de confirmação é exibida informando que a Comunicação interativa foi criada com êxito.

  5. Toque em Editar para abrir a Comunicação interativa no painel direito.

  6. Toque na guia Channels no painel esquerdo e toque em Web.

  7. Vá para a guia Assets e aplique o filtro para exibir apenas os fragmentos de documento no painel esquerdo.

  8. Arraste e solte os seguintes fragmentos de documento em suas áreas de destino na Comunicação interativa:

    Fragmento do documento Área de destino
    bill_details_first_ic Detalhes da Lista
    customer_details_first_ic Detalhes do cliente
    bill_summary_first_ic Resumo da Lista
    summary_charge_first_interative_communication Encargos

  9. Toque em Resumo das Encargos na área de destino e toque em + para adicionar um componente Gráfico.

  10. Toque no componente Gráfico e selecione configure_icon (Configurar). As propriedades do gráfico são exibidas no painel esquerdo:

    1. Especifique um nome para o gráfico.
    2. Selecione Pizza na lista suspensa Tipo de Gráfico.
    3. Selecione a propriedade calltype do tipo de objeto calls do modelo de dados na seção X-axis. Toque em done_icon.
    4. Selecione Frequency na lista suspensa Function.
    5. Selecione a propriedade calltype do tipo de objeto calls do modelo de dados na seção Y-axis. Toque em done_icon.
    6. Toque em done_icon para salvar as propriedades do gráfico.

  11. Selecione a guia Fontes de Dados no painel esquerdo e arraste e solte o objeto de modelo de dados chamadas para a área de destino Chamadas Discriminadas. Todas as propriedades no objeto de modelo de dados calls são exibidas como colunas de tabela na área de destino Chamadas Discriminadas no painel direito.

    Com base no caso de uso, você precisa das colunas Data da chamada, Hora da chamada, Número da chamada, Duração da chamada e Encargos de chamada na tabela.

    table_ic_web

  12. Selecione o cabeçalho da coluna da tabela Mobilenum e selecione Mais opções > Excluir coluna. Da mesma forma, exclua a coluna Calltype.

  13. Selecione o cabeçalho da coluna da tabela Calldate e toque em editar (Editar) para renomear o texto para Data da Chamada. Da mesma forma, renomeie outros cabeçalhos de coluna na tabela.

  14. Com base no caso de uso, insira um botão Pagar Agora na Comunicação Interativa que fornece ao usuário uma opção para fazer o pagamento clicando no botão . Execute as seguintes etapas para inserir o botão:

    1. Toque na área de destino Pagar Agora e toque em + para adicionar um componente Texto.
    2. Toque no componente de texto e toque em editar (Editar).
    3. Renomeie o texto para Pagar Agora.
    4. Selecione o texto e toque no ícone Hiperlink.
    5. Especifique o URL do pagamento no campo Path.
    6. Selecione New Tab na lista suspensa Target.
    7. Toque em done_icon para salvar as propriedades de hiperlink.

  15. Selecione Style na lista suspensa ao lado da opção Preview.

    select_style_ic_web

  16. Estilo do texto do hiperlink para exibi-lo como um botão na Comunicação interativa usando as seguintes etapas:

    1. Toque no componente de texto e selecione edit (Editar).
    2. Na seção Border, especifique 1.5px como Largura da Borda, selecione Sólido como Estilo da Borda e especifique 46px como 12/>Raio da borda .
    3. Selecione Vermelho como a cor de plano de fundo do botão na seção Plano de fundo.
    4. No campo Margin para a seção Dimension & Position, toque no ícone Editar simultaneamente e defina a margem Direita como 450px. Os campos Superior, Inferior e Esquerdo são definidos como em branco.

    ic_web_hyperlink

  17. Toque na área de destino Pagar Agora e toque em + para adicionar um componente Image.

  18. Toque no componente Imagem e selecione configure_icon (Configurar). As propriedades da imagem são exibidas no painel esquerdo:

    1. Especifique PayNow como o nome da imagem no campo Nome.
    2. Toque em Upload, selecione a imagem PayNowWeb salva no sistema de arquivos local e toque em Abrir.
    3. Toque em done_icon para salvar as propriedades da imagem.

  19. Com base no caso de uso, insira um botão Subscribe na Comunicação interativa que fornece ao usuário uma opção para assinar os serviços de valor agregado clicando no botão .

    Repita as etapas 13 - 17 para adicionar um botão Subscribe à área de destino Value Added Services e adicionar a imagem ValueAddedServicesWeb.

Criar Comunicações interativas para impressão e Web com sincronização automática

Você também pode criar uma Comunicação interativa permitindo a sincronização automática entre os canais Imprimir e Web. Para ativar a sincronização automática, selecione a opção Imprimir como principal ao criar a Comunicação interativa. Selecionar a opção Imprimir como principal garante que o conteúdo, a herança e o vínculo de dados do canal da Web sejam derivados do canal Imprimir. Também garante que as alterações feitas no canal de Impressão sejam refletidas no canal da Web.

Execute as seguintes etapas para derivar o conteúdo do canal da Web usando o Canal de impressão:

  1. Faça logon na instância do autor do AEM e navegue até Adobe Experience Manager > Forms > Forms & Documents.

  2. Toque em Criar e selecione Comunicação interativa. O assistente Criar comunicação interativa é exibido.

  3. Especifique create_first_ic no campo Title e no campo Name. Selecione FDM_Create_First_IC como o Modelo de dados de formulário e toque em Próximo.

  4. No assistente Canais:

    1. Especifique create_first_ic_print_template como o modelo Imprimir e toque em Selecionar.
    2. Marque a caixa de seleção Use Print as Principal for Web Channel.
    3. Especifique Create_First_IC_templates pasta > Create_First_IC_Web_Template como o modelo Web e toque em Selecionar.
    4. Toque em Criar.

    Uma mensagem de confirmação é exibida informando que a Comunicação interativa foi criada com êxito.

  5. Toque em Editar para abrir a Comunicação interativa no painel direito.

  6. Execute as etapas 6 - 15 da seção Criar comunicação interativa para o canal de impressão.

  7. Toque na guia Channels no painel esquerdo e toque em Web para gerar automaticamente o conteúdo para o canal Web a partir do canal de Impressão.

  8. Como a caixa de seleção Use Print as Principal for Web Channel é selecionada na etapa 4, o conteúdo e os vínculos são gerados automaticamente para o canal da Web do canal de Impressão.

    O conteúdo do canal de impressão é inserido abaixo do conteúdo do modelo de canal da Web. Para modificar o conteúdo do canal da Web que foi gerado automaticamente pelo canal de Impressão, você pode cancelar a herança para qualquer área de destino.

    Passe o mouse sobre a área de destino relevante no canal da Web e selecione cancelar herança (Cancelar herança) e, na caixa de diálogo Cancelar herança, toque em Sim.

    cancel_herança_web_channel

    Se você cancelou a herança de um componente, é possível reativá-la. Para reativar a herança, passe o mouse sobre o limite da área de destino relevante, que inclui o componente, e toque em reabilitar herança.

  9. Selecione a guia Content no painel esquerdo.

  10. Arraste e solte o conteúdo do canal da Web gerado automaticamente nos painéis existentes no modelo da Web usando a árvore de conteúdo. Esta é a lista de componentes que precisam ser reorganizados:

    • Componente Detalhes da Lista para o painel Detalhes da Lista
    • Componente Detalhes do cliente para o painel Detalhes do cliente
    • Componente Resumo da Lista para o painel Resumo da Lista
    • Resumo do componente Encargos para o painel Resumo de Encargos
    • Fragmento de layout (tabela) para o painel Chamadas discriminadas

    ic_web_content_tree

  11. Repita as etapas 13 - 18 de Criar comunicação interativa para canal Web para inserir os hiperlinks Pagar agora e Assinar no canal Web da Comunicação interativa.

Nesta página