Руководство. Разработка пользовательского визуального элемента Power BITutorial: Developing a Power BI custom visual

Были ли сведения на этой странице полезными?

Мы предоставляем разработчикам возможность легко добавлять пользовательские визуальные элементы в Power BI и использовать их для информационных панелей и отчетов.We’re enabling developers to easily add custom visuals into Power BI for use in dashboard and reports. Мы опубликовали код для всех визуальных элементов на GitHub, чтобы помочь вам приступить к работе.To help you get started, we’ve published the code for all of our visualizations to GitHub.

Кроме платформы визуализации мы предоставили набор тестов и инструменты, которые помогут участникам сообщества создавать высококачественные пользовательские визуальные элементы для Power BI.Along with the visualization framework, we’ve provided our test suite and tools to help the community build high-quality custom visuals for Power BI.

В этом руководстве показано, как разработать пользовательский визуальный элемент Power BI с именем Circle Card, который отображает форматированное значение внутри круга.This tutorial shows you how to develop a Power BI custom visual named Circle Card to display a formatted measure value inside a circle. Визуальный элемент Circle Card поддерживает настройку цвета заливки и толщины линии круга.The Circle Card visual supports customization of fill color and thickness of its outline.

В отчете Power BI Desktop карточки будут изменены на элементы Circle Card.In the Power BI Desktop report, the cards are modified to become Circle Cards.

Пример готового пользовательского визуального элемента Power BI

Из этого руководства вы узнаете, как выполнять следующие задачи:In this tutorial, you learn how to:

  • Создание пользовательского визуального элемента Power BI.Create a Power BI custom visual.
  • Разработка пользовательского визуального элемента с на основе визуальных элементов D3.Develop the custom visual with D3 visual elements.
  • Настройка привязки данных для визуальных элементов.Configure data binding with the visual elements.
  • Форматирование значений данных.Format data values.

Предварительные требованияPrerequisites

Настройка среды разработкиSetting up the developer environment

Вам нужно установить еще несколько средств, помимо указанных в предварительных требованиях.In addition to the prerequisites, there are a few more tools you need to install.

Установка Node.jsInstalling node.js

  1. Чтобы установить Node.js, откройте в веб-браузере страницу Node.js.To install Node.js, in a web browser, navigate to Node.js.

  2. Скачайте последнюю версию установщика MSI.Download the latest feature MSI installer.

  3. Запустите этот установщик и следуйте инструкциям.Run the installer, and then follow the installation steps. Примите условия лицензионного соглашения и сохраните все значения по умолчанию.Accept the terms of the license agreement and all defaults.

     Установка Node.jsNode.js setup

  4. Перезагрузите компьютер.Restart the computer.

Установка пакетовInstalling packages

Теперь нужно установить пакет pbiviz.Now you need to install the pbiviz package.

  1. После перезагрузки компьютера откройте Windows PowerShell.Open Windows PowerShell after the computer has been restarted.

  2. Чтобы установить pbiviz, выполните следующую команду:To install pbiviz, enter the following command.

    npm i -g powerbi-visuals-tools
    

Создание и установка сертификатаCreating and installing a certificate

WindowsWindows

  1. Чтобы создать сертификат, выполните следующую команду:To create a certificate, enter the following command.

    pbiviz --create-cert
    

Она возвращает результат с парольной фразой.It returns a result that produces a passphrase. В нашем примере парольная фраза имеет значение 15105661266553327 .In this case, the passphrase is 15105661266553327.

Сертификат, созданный с помощью PowerShell

  1. Теперь нам нужно установить этот сертификат.Now we need to install the certificate. Чтобы установить сертификат, выполните следующую команду:to install the certificate, enter the following command.

    pbiviz --install-cert
    
  2. В мастере импорта сертификатов убедитесь, что в качестве расположения хранилища выбрано значение "Текущий пользователь".In the Certificate Import Wizard, verify that the store location is set to Current User. Нажмите кнопку Далее.Then select Next.

    Установка сертификата

  3. На этапе Импортируемый файл выберите Далее.At the File to Import step, select Next.

  4. На этапе Защита с помощью закрытого ключа вставьте в поле пароля полученную при создании сертификата парольную фразу. Как вы помните, в нашем примере это 15105661266553327 .At the Private Key Protection step, in the Password box, paste the passphrase you received from creating the cert. Again, in this case it is 15105661266553327.

    Копирование парольной фразы

  5. На этапе Хранилище сертификатов выберите вариант Поместить все сертификаты в следующее хранилище.At the Certificate Store step, select the Place all certificates in the Following store option. Затем нажмите кнопку Обзор.Then select Browse.

    Все сертификаты в следующее хранилище

  6. В окне Выбор хранилища сертификата выберите вариант Доверенные корневые центры сертификации и щелкните ОК.In the Select Certificate Store window, select Trusted Root Certification Authorities and then select OK. Затем на экране Хранилище сертификатов нажмите кнопку Далее.Then select Next on the Certificate Store screen.

    Доверенный корневой сертификат

  7. Чтобы завершить импорт, щелкните Готово.To complete the import, select Finish.

  8. Если появится предупреждение системы безопасности, выберите Да.If you receive a security warning, select Yes.

    Предупреждение системы безопасности

  9. Получив уведомление об успешном выполнении импорта, щелкните ОК.When notified that the import was successful, select OK.

    Импорт сертификата успешно завершен

Важно!

Не закрывайте сеанс Windows PowerShell.Do not close the Windows PowerShell session.

OSXOSX

  1. Если в верхнем левом углу установлена блокировка, снимите ее.If the lock in the upper left is locked, select it to unlock. Найдите localhost и дважды щелкните сертификат.Search for localhost and double-click on the certificate.

    Установка SSL-сертификата 1 на OSX

  2. Выберите пункт Always Trust (Всегда доверять) и закройте окно.Select Always Trust and close the window.

    Установка SSL-сертификата 2 на OSX

  3. Введите имя пользователя и пароль.Enter your username and password. Нажмите кнопку Обновить параметры.Select Update Settings.

    Установка SSL-сертификата 3 на OSX

  4. Закройте все открытые браузеры.Close any browsers that you have open.

Примечание

Если сертификат не удается распознать, может потребоваться перезагрузить компьютер.If the certificate is not recognized, you may need to restart your computer.

Создание пользовательского визуального элементаCreating a custom visual

Итак, мы настроили среду и теперь можем приступать к созданию пользовательского визуального элемента.Now that you have set up your environment, it is time to create your custom visual.

Полный исходный код для этого руководства доступен для скачивания.You can download the full source code for this tutorial.

  1. Проверьте, что установлен пакет визуальных средств Power BI.Verify that the Power BI Visual Tools package has been installed.

    pbiviz
    

    Будут выведены данные справки.You should see the help output.

    
         +syyso+/
     oms/+osyhdhyso/
     ym/       /+oshddhys+/
     ym/              /+oyhddhyo+/
     ym/                     /osyhdho
     ym/                           sm+
     ym/               yddy        om+
     ym/         shho /mmmm/       om+
         /    oys/ +mmmm /mmmm/       om+
     oso  ommmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     +dmd+ smmmh +mmmm /mmmm/       om+
             /hmdo +mmmm /mmmm/ /so+//ym/
                 /dmmh /mmmm/ /osyhhy/
                     //   dmmd
                         ++
    
         PowerBI Custom Visual Tool
    
     Usage: pbiviz [options] [command]
    
     Commands:
    
     new [name]        Create a new visual
     info              Display info about the current visual
     start             Start the current visual
     package           Package the current visual into a pbiviz file
     update [version]  Updates the api definitions and schemas in the current visual. Changes the version if specified
     help [cmd]        display help for [cmd]
    
     Options:
    
     -h, --help      output usage information
     -V, --version   output the version number
     --install-cert  Install localhost certificate
     

  2. Просмотрите выходные данные, включая список поддерживаемых команд.Review the output, including the list of supported commands.

    Поддерживаемые команды

  3. Чтобы создать проект пользовательского визуального элемента, введите следующую команду.To create a custom visual project, enter the following command. Этот проект имеет имя CircleCard.CircleCard is the name of the project.

    pbiviz new CircleCard
    

    Результат создания CircleCard

    Примечание

    Вы создаете проект в текущем расположении, указанном в запросе.You create the new project at the current location of the prompt.

  4. Перейдите в папку проекта.Navigate to the project folder.

    cd CircleCard
    
  5. Запустите пользовательский визуальный элемент.Start the custom visual. Теперь визуальный элемент CircleCard запущен. Он размещен на локальном компьютере.Your CircleCard visual is now running while being hosted on your computer.

    pbiviz start
    

    Запуск пользовательского визуального элемента

Важно!

Не закрывайте сеанс Windows PowerShell.Do not close the Windows PowerShell session.

Тестирование пользовательского визуального элементаTesting the custom visual

В этом разделе мы будем тестировать пользовательский визуальный элемент CircleCard, отправив отчет в Power BI Desktop и добавив в него наш пользовательский визуальный элемент.In this section, we are going to test the CircleCard custom visual by uploading a Power BI Desktop report and then editing the report to display the custom visual.

  1. Войдите на сайт PowerBI.com, затем нажмите значок шестеренки и выберите элемент Настройки.Sign in to PowerBI.com > go to the Gear icon > then select Settings.

    Настройки Power BI

  2. Выберите пункт Разработчик и установите флажок Включить тестирование для визуального элемента разработчика.Select Developer then check the Enable Developer Visual for testing checkbox.

    Параметры на странице для разработчиков

  3. Передайте отчет Power BI Desktop.Upload a Power BI Desktop report.

    Последовательно щелкните "Получить данные" > "Файлы" > "Локальный файл".Get Data > Files > Local File.

    Если вы еще не создали отчет Power BI Desktop, скачайте образец.You can download a sample Power BI Desktop report if you do not have one created already.

    Получить данные Локальный файлGet Data Local File

    Теперь в области навигации слева в разделе Отчет выберите US_Sales_Analysis, чтобы просмотреть этот отчет.Now to view the report, select US_Sales_Analysis from the Report section in the navigation pane on the left.

    Пример пользовательского визуального элемента в Power BI Desktop

  4. Теперь нам нужно изменить отчет в службе Power BI.Now you need to edit the report while in the Power BI service.

    Выберите Изменить отчет.Go to Edit report.

    Изменить отчет

  5. На панели Визуализации выберите Визуальный элемент разработчика.Select the Developer Visual from the Visualizations pane.

    Визуальный элемент разработчика

    Примечание

    Этот элемент представляет пользовательский визуальный элемент, который вы ранее запустили на локальном компьютере.This visualization represents the custom visual that you started on your computer. Он станет доступен только после активации параметров разработчика.It is only available when the developer settings have been enabled.

  6. Обратите внимание, что наш визуальный элемент появился на холсте отчета.Notice that a visualization was added to the report canvas.

    Новый визуальный элемент

    Примечание

    Это очень простой визуальный элемент, который отображает число вызовов метода update.This is a very simple visual that displays the number of times its Update method has been called. На этом этапе визуальный элемент еще не может извлекать данные.At this stage, the visual does not yet retrieve any data.

  7. Выделите в отчете новый визуальный элемент, перейдите на панель "Поля", разверните элемент Sales (Продажи) и выберите Quantity (Количество).While selecting the new visual in the report, Go to the Fields Pane > expand Sales > select Quantity.

    Количество продаж

  8. Для проверки работы нового визуального элемента измените его размер и убедитесь, что значение update увеличивается.Then to test the new visual, resize the visual and notice the update value increments.

    Изменение размеров визуального элемента

Чтобы остановить работу пользовательского визуального элемента в PowerShell, нажмите клавиши CTRL+C.To stop the custom visual running in PowerShell, enter Ctrl+C. В ответ на запрос о завершении пакетного задания последовательно нажмите клавиши Y и ВВОД.When prompted to terminate the batch job, enter Y, then press Enter.

Добавление визуальных элементовAdding visual elements

Теперь вам нужно установить библиотеку D3 JavaScript.Now you need to install the D3 JavaScript library. Библиотека D3 для JavaScript позволяет создавать динамические интерактивные визуализации данных в веб-браузерах.D3 is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. В ней используются широко распространенные стандарты SVG HTML5 и CSS.It makes use of widely implemented SVG HTML5, and CSS standards.

Теперь вы можете разработать пользовательский визуальный элемент, отображающий круг с текстом.Now you can develop the custom visual to display a circle with text.

Примечание

Многие фрагменты текста для этого руководства можно скопировать отсюда.Many text entries in this tutorial can be copied from here.

  1. Чтобы установить библиотеку D3, выполните в PowerShell следующую команду:To install the D3 library in PowerShell, enter the command below.

    npm i d3@3.5.5 --save
    

    Установка библиотеки D3

  2. Чтобы установить определения типов для библиотеки D3, выполните следующую команду:To install type definitions for the D3 library, enter the command below.

    npm i @types/d3@3.5
    

    Установка библиотеки D3

    Эта команда устанавливает определения TypeScript, основанные на файлах JavaScript, что позволяет разрабатывать пользовательские визуальные элементы на TypeScript (супермножество JavaScript).This command installs TypeScript definitions based on JavaScript files, enabling you to develop the custom visual in TypeScript (which is a superset of JavaScript). Для разработки приложений TypeScript идеально подходит интегрированная среда разработки Visual Studio Code.Visual Studio Code is an ideal IDE for developing TypeScript applications.

  3. Запустите Visual Studio Code.Launch Visual Studio Code.

    Чтобы запустить Visual Studio Code из PowerShell, выполните следующую команду:You can launch Visual Studio Code from PowerShell by using the following command.

    code .
    
  4. В области обозревателя разверните папку node_modules и убедитесь, что библиотека D3 успешно установлена.In the Explorer pane, expand the node_modules folder to verify that the d3 library was installed.

    Библиотека D3 в Visual Studio Code

  5. Найдите файл TypeScript с именем index.d.ts, развернув в области обозревателя узлы node_modules > @types > d3.Notice the TypeScript file, index.d.ts, by expanding node_modules > @types > d3 in the Explorer pane.

    Файл Index.d.ts

  6. Выберите файл pbiviz.json.Select the pbiviz.json file.

  7. Чтобы зарегистрировать библиотеку D3, поместите следующую ссылку на файл в массив externalJS.To register the d3 library, enter the following file reference into the externalJS array. Не забудьте добавить запятую между существующей и новой ссылками.Be sure to add a comma between the existing file reference and the new file reference.

    "node_modules/d3/d3.min.js"
    

    Добавление node_modules/d3/d3.min.js

  8. Сохраните изменения в файле pbiviz.json.Save the pbiviz.json file changes.

Разработка визуальных элементовDeveloping the visual elements

Теперь мы готовы перейти к разработке пользовательского визуального элемента, который будет отображать круг и текст.Now we can explore how to develop the custom visual to show a circle and sample text.

  1. В области обозревателя разверните папку src и выберите файл settings.ts.In the Explorer pane, expand the src folder and then select visual.ts.

    Примечание

    Обратите внимание на комментарии в верхней части файла visual.ts.Notice the comments at the top of the visual.ts file. Разрешение на использование пакетов пользовательских визуальных элементов Power BI предоставляется бесплатно на условиях лицензии MIT.Permission to use the Power BI custom visual packages is granted free of charge under the terms of the MIT License. Это соглашение содержит обязательство добавлять комментарии в верхней части файла.As part of the agreement, you must leave the comments at the top of the file.

  2. Удалите следующую логику пользовательского визуального элемента из класса Visual:Remove the following default custom visual logic from the Visual class.

    • объявление четырех закрытых переменных на уровне класса;The four class-level private variable declarations.
    • все строки кода из конструктора;All lines of code from the constructor.
    • все строки кода из метода update;All lines of code from the update method.
    • все оставшиеся строки в модуле, включая методы parseSettings и enumerateObjectInstances.All remaining lines within the module, including the parseSettings and enumerateObjectInstances methods.

    Убедитесь, что код модуля теперь выглядит так:Verify that the module code looks like the following.

    module powerbi.extensibility.visual {
    "use strict";
    export class Visual implements IVisual {
    
        constructor(options: VisualConstructorOptions) {
    
        }
    
        public update(options: VisualUpdateOptions) {
    
            }
        }
    }
    
  3. Под объявлением класса Visual вставьте следующие свойства уровня класса:Beneath the Visual class declaration, insert the following class-level properties.

     private host: IVisualHost;
     private svg: d3.Selection<SVGElement>;
     private container: d3.Selection<SVGElement>;
     private circle: d3.Selection<SVGElement>;
     private textValue: d3.Selection<SVGElement>;
     private textLabel: d3.Selection<SVGElement>; 
    

    Свойства уровня класса в файле visual.ts

  4. Добавьте в конструктор следующий код:Add the following code to the constructor.

    this.svg = d3.select(options.element)
                 .append('svg')
                 .classed('circleCard', true);
    this.container = this.svg.append("g")
                         .classed('container', true);
    this.circle = this.container.append("circle")
                             .classed('circle', true);
    this.textValue = this.container.append("text")
                                 .classed("textValue", true);
    this.textLabel = this.container.append("text")
                                 .classed("textLabel", true);
    

    Этот код добавляет в визуальный элемент группу SVG и три фигуры: круг и два текстовых элемента.This code adds an SVG group inside the visual and then adds three shapes: a circle and two text elements.

    Чтобы отформатировать этот код в документе, щелкните правой кнопкой мыши в любом месте документа Visual Studio Code и выберите действие Форматировать документ.To format the code in the document, right-select anywhere in the Visual Studio Code document, and then select Format Document.

    Форматировать документ

    Чтобы повысить удобочитаемость, документ рекомендуется форматировать каждый раз после добавления фрагментов кода.To improve readability, it is recommended that you format the document every time that paste in code snippets.

  5. Добавьте в метод update следующий код:Add the following code to the update method.

    let width: number = options.viewport.width;
    let height: number = options.viewport.height;
    this.svg.attr({
     width: width,
     height: height
    });
    let radius: number = Math.min(width, height) / 2.2;
    this.circle
     .style("fill", "white")
     .style("fill-opacity", 0.5)
     .style("stroke", "black")
     .style("stroke-width", 2)
    .attr({
     r: radius,
     cx: width / 2,
     cy: height / 2
    });
    let fontSizeValue: number = Math.min(width, height) / 5;
    this.textValue
     .text("Value")
     .attr({
         x: "50%",
         y: "50%",
         dy: "0.35em",
         "text-anchor": "middle"
     }).style("font-size", fontSizeValue + "px");
    let fontSizeLabel: number = fontSizeValue / 4;
    this.textLabel
     .text("Label")
     .attr({
         x: "50%",
         y: height / 2,
         dy: fontSizeValue / 1.2,
         "text-anchor": "middle"
     })
     .style("font-size", fontSizeLabel + "px");
    

    Этот код задает ширину и высоту визуального элемента, а затем инициализирует атрибуты и стили для визуальных элементов.This code sets the width and height of the visual, and then initializes the attributes and styles of the visual elements.

  6. Сохраните файл visual.ts.Save the visual.ts file.

  7. Выберите файл capabilities.json.Select the capabilities.json file.

    Удалите весь элемент объекта, размещенный в строках с 14 по 60.At line 14, remove the entire objects element (lines 14-60).

  8. Сохраните файл capabilities.json.Save the capabilities.json file.

  9. Запустите пользовательский визуальный элемент в PowerShell.In PowerShell, start the custom visual.

    pbiviz start
    

Включить автоматическую перезагрузкуToggle auto reload

  1. Перейдите обратно к отчету Power BI.Navigate back to the Power BI report.

  2. На панели инструментов над визуальным элементом разработчика выберите Включить автоматическую перезагрузку.In the toolbar floating above the developer visual, select the Toggle Auto Reload.

    Включить автоматическую перезагрузку

    Этот параметр отвечает за автоматическую перезагрузку визуального элемента после каждого сохранения изменений в проекте.This option ensures that the visual is automatically reloaded each time you save project changes.

  3. Из области Поля перетащите поле Quantity (Количество) в визуальный элемент разработчика.From the Fields pane, drag the Quantity field into the developer visual.

  4. Убедитесь, что код визуального элемента теперь выглядит так:Verify that the visual looks like the following.

    Визуальный элемент разработчика в виде круга

  5. Измените размер визуального элемента.Resize the visual.

    Обратите внимание, что круг и текст в нем масштабируются в соответствии с размером визуального элемента.Notice that the circle and text value scales to fit the available dimension of the visual.

    При изменении размера визуального элемента метод update вызывается постоянно, что приводит к плавному масштабированию визуальных элементов.The update method is called continuously with resizing the visual, and it results in the fluid rescaling of the visual elements.

    Итак, вы разработали визуальный элемент.You have now developed the visual elements.

  6. Оставьте визуальный элемент в работающем состоянии.Continue running the visual.

Настройка привязки данныхConfiguring data binding

Определите роли данных и сопоставления представлений данных, а затем измените логику пользовательского визуального элемента, чтобы он отображал имя и значение меры.Define the data roles and data view mappings, and then modify the custom visual logic to display the value and display name of a measure.

Настройка возможностейConfiguring the capabilities

В файле capabilities.json определите роли данных и сопоставления представлений данных.Modify the capabilities.json file to define the data role and data view mappings.

  1. В Visual Studio Code откройте файл capabilities.json и удалите из массива dataRoles все его содержимое (строки 3—12).In Visual Studio code, in the capabilities.json file, from inside the dataRoles array, remove all content (lines 3-12).

  2. Вставьте в массив dataRoles следующий код:Inside the dataRoles array, insert the following code.

    {
     "displayName": "Measure",
     "name": "measure",
     "kind": "Measure"
    }
    

    Массив dataRoles теперь определяет одну роли данных с типом measure и именем measure, которая отображает значение Measure.The dataRoles array now defines a single data role of type measure, that is named measure, and displays as Measure. Эта роль позволяет передавать значение из поля меры или поля сводных данных.This data role allows passing either a measure field, or a field that is summarized.

  3. Удалите из массива dataViewMappings все его содержимое (строки 10—31).From inside the dataViewMappings array, remove all content (lines 10-31).

  4. Вставьте в массив dataViewMappings следующее содержимое:Inside the dataViewMappings array, insert the following content.

            {
            "conditions": [
                { "measure": { "max": 1 } }
            ],
            "single": {
                "role": "measure"
            }
           }
    

    Теперь массив dataViewMappings определяет одно поле, которое можно передавать в роль данных с именем measure.The dataViewMappings array now defines one field can be passed to the data role named measure.

  5. Сохраните файл capabilities.json.Save the capabilities.json file.

  6. В Power BI вы можете заметить, что для визуального элемента теперь можно настроить элемент Measure.In Power BI, notice that the visual now can be configured with Measure.

    Количество и мера

    Примечание

    В нашем проекте визуального элемента пока нет логики привязки данных.The visual project does not yet include data binding logic.

Исследование представления данныхExploring the dataview

  1. На панели инструментов над визуальным элементом выберите Показать представление данных.In the toolbar floating above the visual, select Show Dataview.

    Показать представление данных

  2. Разверните представление вниз до узла single и обратите внимание на значение.Expand down into single, and then notice the value.

    Развертывание до нужного значения

  3. Разверните представление до узла metadata (метаданные) и разверните массив columns (столбцы). Обратите особое внимание на значения format и displayName.Expand down into metadata, and then into the columns array, and in particular notice the format and displayName values.

    Значение Displayname

  4. Чтобы вернуться к отображению визуального элемента, на панели инструментов над визуальным элементом выберите Показать представление данных.To toggle back to the visual, in the toolbar floating above the visual, select Show Dataview.

    Переключение отображения

Настройка привязки данныхConfiguring data binding

  1. В Visual Studio Code добавьте в файл visual.ts следующую инструкцию в качестве первой инструкции метода update.In Visual Studio Code, in the visual.ts file, add the following statement as the first statement of the update method.

    let dataView: DataView = options.dataViews[0];
    

    Представление данных в массиве update

    Эта инструкция сохраняет значение dataView в переменной для упрощения доступа и объявляет эту переменную, чтобы она ссылалась на объект dataView.This statement assigns the dataView to a variable for easy access, and declares the variable to reference the dataView object.

  2. В обновление метод, замените .text("Value") приведенным ниже.In the update method, replace .text("Value") with the following.

    .text(dataView.single.value as string)
    

    Замена значения textValue

  3. В обновление метод, замените .text("Label") приведенным ниже.In the update method, replace .text("Label") with the following.

    .text(dataView.metadata.columns[0].displayName)
    

    Замена значения textLabel

  4. Сохраните файл visual.ts.Save the visual.ts file.

  5. Посмотрите на визуальный элемент в Power BI — на нем теперь отображаются значение и имя.In Power BI, review the visual, which now displays the value and the display name.

Итак, вы настроили роли данных и привязали визуальный элемент к представлению данных.You have now configured the data roles and bound the visual to the dataview.

В следующем руководстве вы узнаете, как в пользовательский визуальный элемент добавить параметры форматирования.In the next tutorial you learn how to add formatting options to the custom visual.

ОтладкаDebugging

Советы по отладке настраиваемого визуального элемента см. в руководстве по отладке.For tips about debugging your custom visual, see the debugging guide.

Дальнейшие действияNext steps