Configuração de várias visões usando o modo de tabela individual

Objective

After completing this lesson, you will be able to configure várias visões de tabela usando o modo de tabela individual no relatório de lista.

Várias visões usando o modo de tabela individual

Por padrão, o relatório de lista contém uma tabela exibindo os dados para um business object.

Para cenários mais complexos, você pode precisar fornecer várias visões de uma tabela exibindo um business object. Cada visão pode exibir diferentes estados pré-filtrados.

Tecnicamente, a IU contém somente uma única instância de tabela com uma barra de ferramentas de tabela. O gerenciamento de visões em nível de tabela também está disponível, mas as Diretrizes de design do Fiori não recomendam isso. Para mais informações, consulte Relatório de lista – Área de conteúdo.

Um botão segmentado é usado para alternar entre as visões. Se existirem mais de três visões, é exibido o controle de seleção.

Você pode ativar a exibição do número total de linhas na visão adicionando a configuração showCounts ao arquivo manifest.json. Para mais informações, consulte Definição de várias visões em uma tabela de relatório de lista – Modo de tabela individual.

Você pode usar o guia Configure Multiple Views do desenvolvimento guiado para obter instruções passo a passo ou o editor de páginas para ajudá-lo na criação de várias visões.

Criar várias visões de tabela usando o modo de tabela individual

Para facilitar a navegação em uma tabela de relatório de lista, você pode criar diferentes visões. Quando uma visão é selecionada, somente as entradas que cumprem os parâmetros definidos na visão serão exibidas. Como esta é uma tabela com diferentes filtros, ela é conhecida como modo de tabela individual.

Neste exercício, você criará três visões de tabela com base no Status da viagem: Aberto, Aceito e Cancelado.

Fluxo de tarefas

Neste exercício, você definirá primeiro as anotações @UI.SelectionVariant para as três visões. Em seguida, você adicionará essas anotações como caminhos de seleção rápida de variante usando o Mapa de páginas. Ele adicionará essas anotações ao arquivo manifest.json. Por fim, você verificará os resultados.

Pré-requisitos

Você concluiu o exercício Adicionar uma visão rápida de contato à tabela no capítulo Configuração do conteúdo de colunas de tabela (lição: Configuração de visões rápidas de contato em uma tabela). Como alternativa, você pode verificar sua ramificação de solução: solução/add-quick-contact view-to-table.

Assista à simulação e execute as etapas

Este exercício contém uma simulação que exibe todas as etapas. Você pode seguir a simulação com sua própria conta de teste.

ExerciseStart Exercise

Etapas

  1. Defina as anotações@UI.SelectionVariant para as três visões.

    1. Abra o arquivo layouts.cds no SAP Business Application Studio.

    2. Adicione a anotação @UI.SelectionVariant com o qualificadorcanceled à entidade de destino Travel. Ele selecionará as entradas com TravelStatus_code='X', ou seja, Cancelado.

      Code Snippet
      1234567891011121314151617181920
      annotate TravelService.Travel with @UI: {
    SelectionVariant #canceled: {
        $Type           : 'UI.SelectionVariantType',
        ID              : 'canceled',
        Text            : 'canceled',
        Parameters      : [

        ],
        FilterExpression: '',
        SelectOptions   : [{
            $Type       : 'UI.SelectOptionType',
            PropertyName: TravelStatus_code,
            Ranges      : [{
                $Type : 'UI.SelectionRangeType',
                Sign  : #I,
                Option: #EQ,
                Low   : 'X',
            }, ],
        }, ],
    },

    3. Adicione a segunda anotação @UI.SelectionVariant com o qualificador open. Isso selecionará as entradas com TravelStatus_code='O', ou seja, Aberto.

      Code Snippet
      1234567891011121314151617181920212223
      SelectionVariant#open  : {
         $Type : 'UI.SelectionVariantType',
         ID : 'open',
         Text : 'open',
         Parameters : [

         ],             
         FilterExpression : '',
         SelectOptions : [
             {
                 $Type : 'UI.SelectOptionType',
                 PropertyName : TravelStatus_code,
                 Ranges : [
                     {
                         $Type : 'UI.SelectionRangeType',
                         Sign : #I,
                         Option : #EQ,
                         Low : 'O',
                     },
                 ],
             },
         ],
     },

    4. Adicione a terceira anotação @UI.SelectionVariant com o qualificador accepted. Isso selecionará as entradas com TravelStatus_code='A', o que significa Aceito.

      Code Snippet
      1234567891011121314151617181920
          SelectionVariant #accepted: {
        $Type           : 'UI.SelectionVariantType',
        ID              : 'accepted',
        Text            : 'accepted',
        Parameters      : [

        ],
        FilterExpression: '',
        SelectOptions   : [{
            $Type       : 'UI.SelectOptionType',
            PropertyName: TravelStatus_code,
            Ranges      : [{
                $Type : 'UI.SelectionRangeType',
                Sign  : #I,
                Option: #EQ,
                Low   : 'A',
            }, ],
        }, ],
    }
};

    5. Feche o arquivo layouts.cds.

  2. Adicione essas anotações como caminhos de seleção rápida de variante.

    1. Selecione Aplicativo da Web >Mostrar mapa da página.

    2. Adicione os caminhos de anotação para viagens Abertas, Aceitas e Canceladas.

  3. Verifique os resultados.

    1. Todos os três caminhos de anotação agora são exibidos na Seleção rápida de variante.

    2. Eles também foram adicionados a manifest.json.

    3. Agora você pode ver três botões em seu app: Aberto, Aceito e Cancelado.

Resultado

Você aprendeu a adicionar várias visões usando o modo de tabela individual ao relatório de lista.

Nota

Etapas seguintes

Para mais informações, consulte

Learning

SAP FacebookSAP YoutubeSAP LinkedIn