Adaptar campos de entrada

Você pretende adicionar dois campos de data à subseção e eles devem ter um calendário no diálogo de entradas possíveis. Além disso, você pretende ampliar o campo de entrada individual para um campo de entrada de várias linhas. Além disso, adicione um texto de caractere de preenchimento que é exibido se o campo estiver vazio.

Neste exercício, você realizará as seguintes tarefas utilizando o Editor de páginas:

• Adicione dois campos do tipo Data à subseção da página do objeto.
• Modifique o tipo do campo de entrada e adicione um texto de caractere de preenchimento que é exibido quando o campo está vazio.

Este exercício contém uma simulação que orienta você por todas as etapas descritas abaixo. Você pode seguir a simulação e executar as etapas utilizando sua própria conta de teste.

1. Abra seu projeto CAP no SAP Business Application Studio.

   1. Na visão Explorer, selecione Projetos\app\webapp.

   2. Clique com o botão direito do mouse no webapp e selecione Mostrar mapa da página. O aplicativo Mapa de páginas das viagens é exibido.

   3. Selecione o ícone Edit da página de objeto Travel. O editor de páginas da TravelObjectPage é exibido.

2. Adicione dois campos de data na subseção Informações gerais.

   1. No Layout da página, em Seções, expanda Informações gerais.

   2. Expandir subseções\Informações gerais\Formulário\Campos.

   3. Selecione Adicionar.

   4. Selecione Adicionar campos básicos. A caixa de diálogo Adicionar campo básico é exibida.

   5. Na lista de opções, selecione BeginDate e EndDate.

   6. Selecione Adicionar. Os campos Data final e Data de início aparecem na árvore de controle do Editor de páginas.

   Nota

   No painel à direita, o usuário pode ver as configurações que pode modificar para o campo selecionado.

3. Modifique o tipo do campo Descrição para multilinha. Adicione um texto de espaço reservado a ele.

   1. Execute as etapas 1 e as subetapas a até b da etapa 2.

   2. Selecione Descrição.

   3. No painel à direita, em Tipo de exibição, escolha o menu suspenso.

   4. Selecione Área de texto.

   5. Selecione o ícone Editar no texto fonte. O arquivo layout.cds é exibido. A anotação @UI.MultiLineText é gerada pelo editor de páginas.

   6. Adicione a anotação @UI.Placeholder à anotação @UI.MultiLineText.

      Code Snippet

      Copy codeSwitch to dark mode

      1234
      annotate TravelService.Travel with {
          Description @UI.MultiLineText: true
                      @UI.Placeholder  : '{i18n>DescrPlcehlder}'
      }

   7. Na visão Explorer, selecione Projetos\_i18n\i18n.properties. O arquivo i18n.properties é aberto. Adicione o seguinte texto de espaço reservado ao arquivo:

      Code Snippet

      Copy codeSwitch to dark mode

      1
      DescrPlcehlder=Put your description for the travel

4. Visualize os dois campos de data na aplicação Administrar viagens.

   1. Abra a aplicação Administrar viagens. Na subseção Informações gerais, você pode ver os campos Data final e Data de início.

   2. Selecione Editar.

   3. Selecione o ícone de calendário correspondente ao campo Data final.

      Resultado

      O calendário é adicionado automaticamente como entradas possíveis aos campos de entrada do tipo Data.

   Nota

   Você pode ver na ramificação da solução para este exercício que o Editor de páginas adicionou dois valores do tipo UI.DataField à anotação existente para a subseção ( @UI.FieldGroup#TravelData).

5. Visualize o campo de entrada de várias linhas e o texto de caractere de preenchimento para o campo Descrição.

   1. Abra a aplicação Administrar viagens.

   2. Selecione Editar.

      Resultado

      O campo de entrada individual é ampliado para o campo de texto de várias linhas. Além disso, se o campo de texto estiver vazio, você poderá ver o texto substituído pelo espaço reservado recém-adicionado. Coloque a descrição da viagem aqui.