Criar um layout para personalizar os resultados da pesquisa

Você pode criar o layout de resultado para uma vertical personalizada usando o designer de layout de pesquisa. Você pode começar a projetar o layout escolhendo os modelos oferecidos no designer de layout e usando-os se eles atenderem às suas necessidades. Ou você pode optar por editar esses modelos de várias maneiras para atender às suas necessidades. Por exemplo, adicionar/remover imagens, adicionar/remover texto e modificar texto. Se nenhum dos modelos atender aos seus requisitos, você pode optar por começar a projetar seu layout usando um modelo em branco.

Depois que o layout estiver pronto, use a linguagem de modelo de Cartões Adaptáveis para criar um JSON de layout de resultado usado para definir um tipo de resultado. Mapeie as propriedades de resultado para o layout usando a etapa Mapeamento no designer de layout.

Criar um layout por conta própria

Criar um layout por conta própria requer conhecimento de cartões adaptáveis e seus esquemas. O layout de resultados da pesquisa usa um subconjunto dos elementos oferecidos por cartões adaptáveis e você pode usar o designer de layout para saber mais sobre o conjunto de elementos com suporte.

Ao criar seu próprio layout, crie o layout do card adaptável usando dados do conector e, em seguida, finalize o layout. Existem duas etapas principais na criação de seu próprio layout:

Projete o layout.
Separe os dados do modelo.

Criar o layout

Neste exemplo, mostramos um layout com cabeçalho, logotipo, link e texto descritivo.

Exemplo de um layout com cabeçalho, link e descrição.

E aqui está o arquivo JSON associado ao layout:

{ 
    "type": "AdaptiveCard", 
    "version": "1.3", 
    "body": [ 
        { 
            "type": "ColumnSet", 
            "columns": [ 
                { 
                    "type": "Column", 
                    "width": "auto", 
                    "items": [ 
                        { 
                            "type": "Image", 
                            "url": "https://searchuxcdn.blob.core.windows.net/designerapp/images/OOTBLayouts/search.png", 
                            "altText": "Thumbnail image", 
                            "horizontalAlignment": "center", 
                            "size": "small" 
                        } 
                    ], 
                    "horizontalAlignment": "center" 
                }, 
                { 
                    "type": "Column", 
                    "width": 10, 
                    "items": [ 
                        { 
                            "type": "TextBlock", 
                            "text": "[Contoso Solutions](https://contoso.com)", 
                            "weight": "bolder", 
                            "color": "accent", 
                            "size": "medium", 
                            "maxLines": 3 
                        }, 
                        { 
                            "type": "TextBlock", 
                            "text": "[https://contoso.com](https://contoso.com)", 
                            "weight": "bolder", 
                            "spacing": "small", 
                            "maxLines": 3 
                        }, 
                        { 
                            "type": "TextBlock", 
                            "text": "Marketing team at Contoso.., and looking at the Contoso Marketing documents on the team site. This contains the data from FY20 and will taken over to FY21...Marketing Planning is ongoing for FY20..", 
                            "maxLines": 3, 
                            "wrap": true 
                        } 
                    ], 
                    "spacing": "medium" 
                } 
            ] 
        } 
    ], 
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" 
}

Separar os dados do layout

Você pode separar os dados do layout e vinculá-los.

Aqui está o layout JSON depois de associar os dados:

{ 
    "type": "AdaptiveCard", 
    "version": "1.3", 
    "body": [ 
        { 
            "type": "ColumnSet", 
            "columns": [ 
                { 
                    "type": "Column", 
                    "width": "auto", 
                    "items": [ 
                        { 
                            "type": "Image", 
                            "url": "https://searchuxcdn.blob.core.windows.net/designerapp/images/OOTBLayouts/search.png", 
                            "altText": "Thumbnail image", 
                            "horizontalAlignment": "center", 
                            "size": "small" 
                        } 
                    ], 
                    "horizontalAlignment": "center" 
                }, 
                { 
                    "type": "Column", 
                    "width": 10, 
                    "items": [ 
                        { 
                            "type": "TextBlock", 
                            "text": "[${title}](${titleLink})", 
                            "weight": "bolder", 
                            "color": "accent", 
                            "size": "medium", 
                            "maxLines": 3 
                        }, 
                        { 
                            "type": "TextBlock", 
                            "text": "[${titleLink}](${titleLink})", 
                            "weight": "bolder", 
                            "spacing": "small", 
                            "maxLines": 3 
                        }, 
                        { 
                            "type": "TextBlock", 
                            "text": "${description}", 
                            "maxLines": 3, 
                            "wrap": true 
                        } 
                    ], 
                    "spacing": "medium" 
                } 
            ] 
        } 
    ], 
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" 
}

Dados de exemplo: especifique dados de exemplo no Editor de Dados de Exemplo para exibir o card vinculado a dados quando estiver no Modo de visualização.

{ 
    "title": "Contoso Solutions", 
    "titleLink": "https://contoso.com", 
    "description": "Marketing team at Contoso.., and looking at the Contoso Marketing documents on the team site. This contains the data from FY20 and will be taken over to FY21...Marketing Planning is ongoing for FY20.." 
}

Mapear o layout para as propriedades de resultado

Você deve mapear cada campo do layout para uma propriedade de resultado ou uma propriedade de conector para gerar o JSON de layout de resultado.

Captura de tela de um exemplo de layout na página Pesquisar no Layout do Designer com um campo selecionado e o painel de propriedades aberto.

Selecione um campo no layout para destacar as variáveis que precisam ser mapeadas. Você pode usar várias variáveis para um único campo, e todos os campos devem ser mapeados para as propriedades do resultado.

Mostrar trecho no resultado da pesquisa

Trechos dinâmicos gerados na propriedade de conteúdo do resultado do conector podem ser mostrados no resultado da pesquisa. ResultSnippet é a propriedade do sistema que atua como uma propriedade de espaço reservado para os trechos gerados para cada resultado do conector. Para mostrar os trechos no layout de resultados, a propriedade do sistema ResultSnippet deve ser mapeada para um campo apropriado, por exemplo, Descrição, no layout de resultados da pesquisa. Os snippets gerados em cada resultado também realçam as correspondências no Snippet com o termo de consulta inserido pelo usuário.

Itens a considerar

Antes de começar, há algumas coisas que você deve fazer e algumas coisas que você deve evitar para garantir que seus layouts sejam bem-sucedidos.

Fazer

Ao projetar os layouts, pense na estrutura de layout como linhas e colunas e crie-as adicionando elementos de conjunto de colunas
Forneça um logotipo/ícone para cada layout de resultado, pois isso mantém a consistência e facilita a digitalização com outros resultados. Edite um modelo para fornecer o link do logotipo no layout se estiver usando links estáticos para logotipos e não propriedades de resultado.
Recomenda-se o uso de um logotipo quadrado para garantir o alinhamento adequado dos resultados. Para evitar pixelização, use um logotipo com tamanho mínimo de 32 px por 32 px.
Pense nos requisitos do tema ao projetar um layout de resultado; O ícone de resultado também deve estar visível no tema escuro.
Valide o layout de resultado para cenários em que nenhum dado é retornado para uma propriedade de resultado usada no JSON de resultado. Use a $when condição para ocultar um elemento se a propriedade não contiver dados.
Verifique se os tipos de dados da condição e da $when propriedade result correspondem. Por exemplo, não compare Number com Text na $when condição.
Certifique-se de que o Textblock elemento possa lidar com conteúdo dinâmico. Você pode usar as propriedades do wrap elemento and maxLines para essa finalidade.
Formatar corretamente a data ao usar {DATE()} no Markdown.
Certifique-se de que as propriedades do tipo StringCollection sejam encapsuladas em um método de junção como: json ${propertyName} -> ${join(propertyName, ‘,’)} . Se você quiser mostrar um único valor (digamos, o i-ésimo item) de um StringCollection, poderá especificá-lo da seguinte maneira: json ${propertyName} -> ${propertyName[i]} (Observação: a indexação em tipos StringCollection começa em 0)

Não fazer

Não defina tipos de dados inválidos ao associar valores. Para obter mais informações sobre tipos de dados, consulte Gerenciar o esquema de pesquisa.
Evite cortar o resultado na página de resultados seguindo a altura máxima do layout de resultados JSON. Se você exceder a altura máxima do layout de resultados, o resultado será cortado na página de resultados.
Não use px valores em propriedades de elemento.
Não use markdown com a propriedade ResultSnippet no layout de resultados para realçar correspondências de consulta no resultado da pesquisa.

Recursos

Personalizar a página de resultados da pesquisa

Cartões adaptáveis

Modelos de Cartões Adaptáveis Linguagem do modelo

Esquema do card adaptável

Last updated on 2026-08-22