创建布局以自定义搜索结果

项目
04/07/2023

可以使用搜索布局设计器为自定义纵向搜索设计结果布局。你可以开始设计布局，方法是选择布局设计器中提供的模板，并在它们符合你的要求时使用这些模板。或者，可以选择以各种方式编辑这些模板，以满足你的要求。例如，添加/删除图像、添加/删除文本和修改文本。如果任何模板都不能满足你的要求，你可以选择使用空白模板开始设计布局。

布局准备就绪后，使用自适应卡片模板语言创建用于定义结果类型的结果布局 JSON。使用布局设计器中的“映射”步骤将结果属性映射到布局。

自行创建布局

自行创建布局需要了解自适应卡片及其架构。搜索结果布局使用自适应卡提供的元素子集，你可以使用布局设计器了解支持的元素集。

创建自己的布局时，请使用连接器中的数据创建自适应卡片布局，然后完成布局。创建自己的布局有两个主要步骤：

设计布局。
将数据与模板分开。

设计布局

在此示例中，我们显示了具有标题、徽标、链接和描述性文本的布局。

包含标题、链接和说明的布局示例。

下面是布局的关联 JSON 文件：

{ 
    "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" 
}

将数据与布局分开

可以将数据与布局分开并绑定数据。

下面是绑定数据后的布局 JSON：

{ 
    "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" 
}

示例数据：在 “示例数据编辑器” 中指定示例数据，以在 预览模式下查看数据绑定卡片。

{ 
    "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 taken over to FY21...Marketing Planning is ongoing for FY20.." 
}

将布局映射到结果属性

必须将布局的每个字段映射到结果属性或连接器属性才能生成结果布局 JSON。

“搜索布局设计器”页上示例布局的屏幕截图，其中选择了字段并打开了属性窗格。

选择布局中的字段以突出显示需要映射的变量。可以对单个字段使用多个变量，并且所有字段都必须映射到结果属性。

在搜索结果中显示代码片段

在连接器结果 的内容 属性上生成的动态代码片段可以显示在搜索结果中。 ResultSnippet 是充当为每个连接器结果生成的代码片段的占位符属性的系统属性。若要显示结果布局上的代码片段， ResultSnippet 系统属性必须映射到搜索结果布局中的相应字段，例如 Description。在每个结果上生成的代码片段还会突出显示代码片段中用户输入的查询词的匹配项。

注意事项

在开始之前，应执行一些操作，并避免执行一些操作，以确保布局成功。

允许事项

设计布局时，将布局结构视为行和列，并通过添加列集元素来创建这些结构
为每个结果布局提供徽标/图标，因为这样可以保持一致性，并与其他结果轻松扫描。如果对徽标而不是结果属性使用静态链接，请编辑模板以在布局中提供徽标链接。
建议使用方形徽标，以确保结果正确对齐。若要避免像素化，请使用最小大小为 32px x 32px 的徽标。
设计结果布局时，请考虑主题要求，结果图标也应在深色主题中可见。
对于结果 JSON 中使用的结果属性未返回任何数据的情况，请验证结果布局。 $when如果属性不包含数据，请使用条件隐藏元素。
确保条件和结果属性的 $when 数据类型匹配。例如，不要在条件中$when与 Text 进行比较Number。 
确保 Textblock 元素可以处理动态内容。可以使用 wrap 和 maxLines 元素属性实现此目的。
在 Markdown 中使用 {DATE()} 时正确设置日期格式。 
确保 StringCollection 类型的属性在联接方法中包装为： json ${propertyName} -> ${join(propertyName, ‘,’)} 。如果要显示单个值 (例如，ith 项从 StringCollection) ，可以按如下所示指定它： json ${propertyName} -> ${propertyName[i]} (注意：StringCollection 类型的索引从 0 开始)