建立配置以自訂搜尋結果

發行項
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, ‘,’)} 。如果您想要顯示單一值 (例如，從 StringCollection) 的第一個專案，您可以指定它，如下所示： json ${propertyName} -> ${propertyName[i]} (注意：在 StringCollection 類型中編制索引會從 0 開始)