Crear un diseño para personalizar los resultados de la búsquedaCreate a layout to customize search results

Puede diseñar el diseño de los resultados de una vertical personalizada mediante el diseñador de diseño de búsqueda.You can design the result layout for a custom vertical using the search layout designer. Puede empezar a diseñar el diseño si elige plantillas que se ofrecen en el diseñador de diseño y las usa si se ajustan a sus necesidades.You can start designing the layout by choosing templates offered in the layout designer and using them if they fit your requirements. También puede optar por editar estas plantillas de varias formas para ajustarse a sus necesidades.Or you can choose to edit these templates in various ways to fit your requirements. Por ejemplo, agregar o quitar imágenes, agregar o quitar texto y modificar texto.For example, add/remove images, add/remove text, and modify text. Si ninguna de las plantillas cumple los requisitos, puede optar por empezar a diseñar el diseño con una plantilla en blanco.If none of the templates meet your requirements, you can choose to start designing your layout using a blank template.

Una vez que el diseño esté listo, use el lenguaje de plantilla tarjetas adaptables para crear una JSON de diseño de resultados que se usa para definir un tipo de resultado.After the layout is ready, use the Adaptive Cards Template language to create a result layout JSON that's used to define a result type. Las propiedades de resultado se asignan al diseño mediante el paso de asignación del diseñador de diseño.You map the result properties to the layout using the Mapping step in the layout designer.

Crear un diseño por su cuentaCreate a layout on your own

La creación de un diseño propio requiere conocimientos de tarjetas adaptables y su esquema.Creating a layout on your own requires knowledge of adaptive cards and their schema. El diseño de resultados de búsqueda usa un subconjunto de los elementos ofrecidos por tarjetas adaptables y puede usar el diseñador de diseño para obtener información sobre el conjunto de elementos admitidos.Search result layout uses a subset of the elements offered by adaptive cards, and you can use the layout designer to learn about the supported set of elements.

Al crear su propio diseño, cree el diseño de la tarjeta adaptable con los datos del conector y, a continuación, finalice el diseño.While creating your own layout, create the adaptive card layout using data from your connector, and then finalize the layout. Existen dos pasos principales para crear su propio diseño:There are two main steps in creating your own layout:

  • Diseñar el diseño.Design the layout.
  • Separe los datos de la plantilla.Separate the data from the template.

Edite el diseño.Design the layout

En este ejemplo, se muestra un diseño con un encabezado, un vínculo y un texto descriptivo.In this example, we show a layout with a header, link, and descriptive text.

Ejemplo de un diseño con un encabezado, un vínculo y una descripción.

Y este es el archivo JSON asociado al diseño:And here's the layout's associated JSON file:

{
    "type": "AdaptiveCard",
    "version": "1.0",
     "body": [
{

            "type": "ColumnSet",
             "columns": [
                 {
                     "type": "Column",
                     "width": 8,
                     "items": [
                         {
                             "type": "TextBlock",
                             "text": "Contoso Marketing Analysis - Q3 FY18",
                             "color": "Accent",
                             "size": "Medium",
                             "spacing": "None",
                             "$when": "{title != \"\"}",
                             "weight": "Bolder"
                        },
                        {
                        "type": "TextBlock",  
                        "text": "https://contoso.com/hr/link",
                        "spacing": "None",  
                        "color": "Dark",
                        "weight": "Bolder"

                        },

                        {  
                        "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..",  
                        "wrap": true,
                        "maxLines": 2,
                        "spacing": "Medium"
                        }
                        ],

                    "horizontalAlignment": "Center",
                    "spacing": "None"

                }

            ]

        }
        ],

    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Separar los datos del diseñoSeparate the data from the layout

Puede separar los datos del diseño y enlazar los datos.You can separate the data from the layout and bind the data.

Este es el JSON de diseño después de enlazar los datos:Here's Layout JSON after binding the data:

{

    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
    {
    "type": "ColumnSet",
"columns": [

                {
                "type": "Column",
                "width": 8,
                "items": [
                {
                "type": "TextBlock",
                "text": "[{title}]({titleUrl})",
                "color": "Accent",
                "size": "Medium",
                "spacing": "None",
                "weight": "Bolder"

                 },
                 {
                 "type": "TextBlock",
                 "text": "{link}",
                 "spacing": "None",
                 "color": "Dark",
                 "weight": "Bolder"
                 },
                 {
                 "type": "TextBlock",
                 "text": "{description}",
                 "wrap": true,
                 "maxLines": 2,
                 "spacing": "Medium"
                 }
                 ],
                 "horizontalAlignment": "Center",
                 "spacing": "None"
                 }
                 ]

        }

    ],

    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Datos de ejemplo: especifique datos de ejemplo en el Editor de datos de ejemplo para ver la tarjeta enlazada a datos en modo de vista previa.Sample data: Specify sample data in the Sample Data Editor to view the data-bound card when in Preview Mode.

{

    "title": "Contoso Marketing Analysis - Q3 FY18",
    "titleUrl": "https://contoso.com/hr/link",
    "link": "https://contoso.com/hr/link",
    "description": "Marketing team, and looking at the Contoso Marketing documents on the team site. Yo can't see right...Marketing Planning presentation?"

}

Asignar el diseño a las propiedades del resultadoMap the layout to the result properties

Debe asignar cada campo del diseño a una propiedad de resultado o a una propiedad de conector para generar el JSON del diseño de resultados.You must map each field of the layout to a result property or a connector property to generate the result layout JSON.

Captura de pantalla de un diseño de ejemplo en la página del diseñador de diseño de búsqueda con un campo seleccionado y el panel de propiedades abierto.

Seleccione un campo en el diseño para resaltar las variables que se deben asignar.Select a field in the layout to highlight the variables that need to be mapped. Puede usar varias variables para un solo campo y todos los campos deben asignarse a las propiedades del resultado.You can use multiple variables for a single field, and all fields must be mapped to the result properties.

Mostrar fragmento de código en los resultados de búsquedaShow snippet on search result

Los fragmentos dinámicos generados en la propiedad de contenido del resultado del conector se pueden mostrar en los resultados de la búsqueda.Dynamic snippets generated on the content property of the connector result can be shown on the search result. ResultSnippet es la propiedad del sistema que actúa como propiedad del marcador de posición para los fragmentos de código generados para cada resultado del conector.ResultSnippet is the system property that acts as a placeholder property for the snippets generated for each Connector result. Para mostrar los fragmentos de código en el diseño de los resultados, la propiedad del sistema ResultSnippet debe asignarse a un campo apropiado, por ejemplo Descripción, en el diseño de resultado de la búsqueda.To show the snippets on the result layout, the ResultSnippet system property must be mapped to an appropriate field, for example Description, in the search result layout. Los fragmentos de código generados en cada resultado también resaltan las coincidencias en el fragmento de código con el término de consulta escrito por el usuario.Snippets generated on each result also highlight the matches in the Snippet with the query term entered by the user.

Consideraciones que se deben tener en cuentaThings to consider

Antes de empezar, hay algunas cosas que debe hacer y algunas cosas que debe evitar para asegurarse de que los diseños se realicen correctamente.Before you get started, there are a few things that you should do and a few things you should avoid to ensure that your layouts will be successful.

CorrectoDo

  • Edite una plantilla para proporcionar el vínculo del logotipo en el diseño si está usando vínculos estáticos para los logotipos y no las propiedades de los resultados.Edit a template to provide the logo link in the layout if you're using static links for logos and not result properties.
  • Validar el diseño de los resultados de los escenarios en los que no se devuelven datos para una propiedad de resultado usada en el JSON del resultado.Validate the result layout for scenarios where no data is returned for a result property used in the result JSON. Use la $when condición para ocultar un elemento si la propiedad no contiene datos.Use the $when condition to hide an element if the property doesn't contain data.
  • Asegúrese de que los tipos de datos de la $when condición y la propiedad result coinciden.Make sure that data types of the $when condition and the result property match. Por ejemplo, no compare Number con Text en la $when condición.For example, don't compare Number with Text in the $when condition.
  • Piense en los requisitos de tema al diseñar un diseño de resultados.Think of theme requirements when designing a result layout.
  • Asegúrese de que el Textblock   elemento puede controlar el contenido dinámico.Make sure that the Textblock element can handle dynamic content. Puede usar las wrap propiedades del maxLines elemento y para este propósito.You can use the wrap and maxLines element properties for this purpose.
  • Dar formato adecuado a la fecha al usar {DATE()} en Markdown.Properly format the date when using {DATE()} in Markdown.

IncorrectoDon't

  • No defina tipos de datos no válidos al enlazar valores.Don't define invalid data types when binding values. Para obtener más información acerca de los tipos de datos, consulte administrar el esquema de búsqueda.For more information about data types, see Manage the Search schema.
  • Evite recortar el resultado en la página de resultados mediante el alto máximo de la JSON del diseño de resultados.Avoid cropping the result on the result page by following the maximum height of the result layout JSON. Si supera el alto máximo del diseño de los resultados, el resultado se recortará en la página de resultados.If you exceed the maximum height of the result layout, the result will be cropped on the result page.
  • No use px valores en las propiedades del elemento.Don't use px values in element properties.
  • No use Markdown con la propiedad ResultSnippet en el diseño de resultados para resaltar la coincidencia de consulta en los resultados de búsqueda.Don't use markdown with the ResultSnippet property in the result layout to highlight query match in the search result.

RecursosResources

Página personalizar resultados de búsquedaCustomize search result page

Tarjetas adaptablesAdaptive cards

Idioma de plantilla de tarjetas adaptablesAdaptive Cards Template language

Esquema de tarjeta adaptableAdaptive card schema