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

Статья
09/17/2023

С помощью пользовательского макета отчета можно внедрить отчет Power BI с другим макетом, отличным от того, что было сохранено в исходном отчете. При определении пользовательского макета отчета можно изменить размер страницы отчета и управлять размером, положением и видимостью визуальных элементов на странице.

Общие сведения о пользовательском макете

Чтобы создать пользовательский макет отчета, определите объект пользовательского макета и передайте его в объект параметров в конфигурации внедрения.

В объекте параметров задайте layoutTypemodels.LayoutType.Custom и задайте customLayout для пользовательского объекта макета:

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.Custom
        customLayout: {...}
    }
};

Дополнительные сведения о параметрах отчета см. в разделе "Настройка параметров отчета".

Определение пользовательского макета отчета

Каждый пользовательский макет отчета представлен пользовательским объектом макета, который определяется для указания размера страницы, масштаба холста и макета страниц. В макете страниц можно указать визуальный макет для каждого визуального элемента и макет по умолчанию для отчета.

Определение пользовательского интерфейса макета

ICustomLayout Используйте интерфейс для определения объекта пользовательского макета:

interface ICustomLayout {
    pageSize?: IPageSize;
    displayOption?: DisplayOption;
    pagesLayout?: PagesLayout;
}

Интерфейс ICustomLayout имеет следующие свойства:

pageSizeIPageSize— Объект, определяющий размер страницы области холста для отчета.
```
interface IPageSize {
    type: PageSizeType;
}
```
Объект IPageSize использует перечисление PageSizeType для задания размера страницы:
```
enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}
```
displayOptionDisplayOption— перечисление, определяющее способ масштабирования холста в соответствии с рамкой.
```
enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}
```
pagesLayoutPagesLayout— Объект, который управляет макетом для каждого визуального элемента на странице. Это свойство сопоставляет имя страницы с PageLayout объектом. Дополнительные сведения см. в разделе "Определение макета страниц".
```
type PagesLayout = { [key: string]: IPageLayout; }
```

Определение макета страниц

IPageLayout Используйте интерфейс для определения объекта макета страниц. Интерфейс позволяет определить карту визуального макета, которая сопоставляет каждое визуальное имя с новым объектом макета и визуальным макетом по умолчанию. Определение макета страниц является необязательным. Если вы не предоставляете макет для отчета, Power BI применяет макет по умолчанию к отчету. То есть макет по умолчанию применяется ко всем визуальным элементам, которые не указаны в объекте макета визуальных элементов. Например, можно сначала скрыть все визуальные элементы в отчете, а затем отобразить выбранные визуальные элементы в выбранном макете.

interface IPageLayout {
    defaultLayout: IVisualLayout,
    visualsLayout: { [key: string]: IVisualLayout; };
}

Интерфейс IPageLayout имеет следующие свойства:

defaultLayoutIVisualLayout— Объект, определяющий визуальный макет по умолчанию. Макет по умолчанию автоматически применяется ко всем визуальным элементам на странице отчета.
```
defaultLayout?: IVisualLayout
```
visualsLayoutVisualsLayout— Объект, определяющий карту между визуальными именами и визуальными макетами на странице отчета.
```
visualsLayout: VisualsLayout
```
```
VisualsLayout = { [key: string]: IVisualLayout; }
```

Определение визуального макета

Чтобы определить визуальный макет, используйте IVisualLayout интерфейс для создания объекта визуального макета и задания его положения, размера и видимости.

interface IVisualLayout {
    x?: number;
    y?: number;
    z?: number;
    width?: number;
    height?: number;
    displayState?: IVisualContainerDisplayState;
}

Интерфейс IVisualLayout имеет следующие свойства:

xz ,y — определяет координаты x, y и z визуального элемента.
width, height — определяет ширину и высоту визуального элемента.
displayStateIVisualContainerDisplayState— объект, определяющий видимость визуального элемента.
```
interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}
```
Объект IVisualContainerDisplayState использует перечисление VisualContainerDisplayMode для задания видимости:
```
enum VisualContainerDisplayMode {
    Visible,
    Hidden
}
```

Обновление макета

Чтобы обновить макет отчета при загрузке отчета, используйте report.updateSettings этот метод. Дополнительные сведения см. в разделе "Обновление параметров отчета" во время выполнения.

Пример

В этом полном примере кода показано, как внедрить отчет с помощью пользовательского макета отчета. Все визуальные элементы скрыты, за исключением двух визуальных элементов: VisualContainer1 и VisualContainer2. VisualContainer1 имеет новый макет, положение и размер, а VisualContainer2 отображается с макетом отчета по умолчанию.

// Get models. Models contains enums that can be used.
let models = window['powerbi-client'].models;

let embedConfig = {
    type: 'report',
    id: reportId,
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Embed,
    accessToken: 'H4...rf',
    settings: {
        layoutType: models.LayoutType.Custom
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                width: 1600,
                height: 1200
            },
            displayOption: models.DisplayOption.ActualSize,
            pagesLayout: {
                "ReportSection1" : {
                    defaultLayout: {
                        displayState: {
                            mode: models.VisualContainerDisplayMode.Hidden
                        }
                    },
                    visualsLayout: {
                        "VisualContainer1": {
                            x: 1,
                            y: 1,
                            z: 1,
                            width: 400,
                            height: 300,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                        "VisualContainer2": {
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                    }
                }
            }
        }
    }
};
...
// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfig);

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

Получение страниц и визуальных элементов

Настройка параметров отчета