Tutorial: Criar a comunicação interativa tutorial-create-interactive-communication

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

Selecione Criar e selecione Comunicação interativa. O assistente Criar Comunicação Interativa é exibido.

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

No assistente Canais:

1. Especifique create_first_ic_print_template como o Modelo de impressão e selecione Selecionar. Certifique-se de que a caixa de seleção Usar impressão como principal para canal da Web não esteja marcada.

2. Especifique Create_First_IC_templates folder > Create_First_IC_Web_Template como o modelo da Web e selecione Select.

3. Selecione Criar.

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

Selecione Editar para abrir a Comunicação Interativa no painel direito.

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

Arraste e solte os seguintes fragmentos de documento nas áreas de destino na Comunicação interativa:

Selecione a área de destino Gráficos e + para adicionar um componente Gráfico.

Selecione o componente Gráfico e selecione (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 de modelo de dados calls na seção eixo X. Selecione .
4. Selecione Frequência na lista suspensa Função.
5. Selecione a propriedade calltype do tipo de objeto de modelo de dados calls na seção eixo Y. Selecione .
6. Selecione para salvar as propriedades do gráfico.

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

Selecione o Campo de texto na coluna Data e selecione (Configurar).

Selecione Objeto de Modelo de Dados na lista suspensa Tipo de Associação e selecione chamadas > calldate. Selecione duas vezes para salvar as propriedades.

Da mesma forma, crie uma associação com calltime, callnumber, callduration e callcharge para campos de texto nas colunas Time, Number, Duration e Charges, respectivamente.

Selecione a área de destino PayNow e + para adicionar um componente Image.

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

1. Especifique PayNow como o nome da imagem no campo Name.
2. Selecione Carregar, a imagem salva no sistema de arquivos local e Abrir.
3. Selecione para salvar as propriedades da imagem.

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

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

Selecione Criar e selecione Comunicação interativa. O assistente Criar Comunicação Interativa é exibido.

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

No assistente Canais:

1. Especifique create_first_ic_print_template como o Modelo de impressão e selecione Selecionar. Certifique-se de que a caixa de seleção Usar impressão como principal para canal da Web não esteja marcada.

2. Especifique Create_First_IC_templates folder > Create_First_IC_Web_Template como o modelo da Web e selecione Select.

3. Selecione Criar.

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

Selecione Editar para abrir a Comunicação Interativa no painel direito.

Selecione a guia Canais no painel esquerdo e selecione Web.

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

Arraste e solte os seguintes fragmentos de documento nas áreas de destino na Comunicação interativa:

Selecione a área de destino Resumo de Encargos e + para adicionar um componente Gráfico.

Selecione o componente Gráfico e selecione (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 de modelo de dados calls na seção eixo X. Selecione .

4. Selecione Frequência na lista suspensa Função.

5. Selecione a propriedade calltype do tipo de objeto de modelo de dados calls na seção eixo Y. Selecione .

6. Selecione para salvar as propriedades do gráfico.

Selecione a guia Fontes de Dados no painel esquerdo e arraste e solte o objeto de modelo de dados chamadas na área de destino Chamadas detalhadas. 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ê exige as colunas Data da chamada, Hora da chamada, Número da chamada, Duração da chamada e Encargos da chamada na tabela.

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

Selecione o cabeçalho de coluna da tabela Calldate e selecione (Editar) para renomear o texto como Call Date. Da mesma forma, renomeie outros cabeçalhos de coluna na tabela.

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

1. Selecione a área de destino Pagar Agora e + para adicionar um componente Texto.

2. Selecione o componente de texto e selecione (Editar).

3. Renomeie o texto para Pagar Agora.

4. Selecione o texto e o ícone de Hiperlink.

5. Especifique a URL de pagamento no campo Caminho.

6. Selecione Nova guia na lista suspensa Destino.

7. Selecione para salvar as propriedades do hiperlink.

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

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

1. Selecione o componente de texto e selecione (Editar).

2. Na seção Borda, especifique 1.5px como Largura da Borda, selecione Sólido como Estilo da Borda e especifique 46px como Raio da Borda.

3. Selecione Vermelho como a cor de fundo do botão na seção Plano de fundo.

4. No campo Margem para a seção Dimension e Posição, selecione o ícone Editar simultaneamente e defina a margem Direita como 450px. Os campos Superior, Inferior e Esquerdo são definidos como em branco.

Selecione a área de destino Pagar Agora e + para adicionar um componente Imagem.

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

1. Especifique PayNow como o nome da imagem no campo Name.

2. Selecione Carregar, selecione a imagem PayNowWeb salva no sistema de arquivos local e selecione Abrir.

3. Selecione para salvar as propriedades da imagem.

Com base no caso de uso, insira um botão Assinar na Comunicação Interativa que forneça 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 Assinar à área de destino Serviços de Valor Agregado e adicionar a imagem ValueAddedServicesWeb.

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

Selecione Criar e selecione Comunicação interativa. O assistente Criar Comunicação Interativa é exibido.

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

No assistente Canais:

1. Especifique create_first_ic_print_template como o Modelo de impressão e selecione Selecionar.

2. Marque a caixa de seleção Usar impressão como principal para canal da Web.

3. Especifique Create_First_IC_templates folder > Create_First_IC_Web_Template como o modelo da Web e selecione Select.

4. Selecione Criar.

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

Selecione Editar para abrir a Comunicação Interativa no painel direito.

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

Selecione a guia Canais no painel esquerdo e selecione Web para gerar automaticamente conteúdo para o canal da Web a partir do canal de impressão.

Como a caixa de seleção Usar impressão como principal para canal da Web está marcada na etapa 4, o conteúdo e as associações são gerados automaticamente para o canal da Web a partir 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 no canal de impressão, você pode cancelar a herança de qualquer área de destino.

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

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

Selecione a guia Conteúdo no painel esquerdo.

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 Sumário da Lista para o painel Sumário da Lista
• Componente Sumário de Encargos para o painel Sumário de Encargos
• Fragmento de layout (tabela) para o painel Chamadas discriminadas

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