Rapor düzenini kişiselleştirme

Makale
09/17/2023

Özel rapor düzeniyle, özgün rapora kaydedilenden farklı bir düzene sahip bir Power BI raporu ekleyebilirsiniz. Özel bir rapor düzeni tanımladığınızda, rapor sayfasının boyutunu değiştirebilir ve sayfadaki görsellerin boyutunu, konumunu ve görünürlüğünü denetleyebilirsiniz.

Özel düzene genel bakış

Özel rapor düzeni oluşturmak için , özel bir düzen nesnesi tanımlayın ve bunu ekleme yapılandırmasındaki ayarlar nesnesine geçirin.

Ayarlar nesnesinde, layoutTypemodels.LayoutType.Custom özel düzen nesnenize ayarlayın ve olarak ayarlayın customLayout :

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

Rapor ayarları hakkında daha fazla bilgi için bkz. Rapor ayarlarını yapılandırma.

Özel rapor düzeni tanımlama

Her özel rapor düzeni, sayfa boyutunu, tuval ölçeğini ve sayfa düzenini belirtmek için tanımladığınız özel bir düzen nesnesiyle temsil edilir. Sayfa düzeninde, her görsel için bir görsel düzeni ve rapor için varsayılan görsel düzeni belirtebilirsiniz.

Özel düzen arabirimi tanımı

ICustomLayout Özel düzen nesnesi tanımlamak için arabirimini kullanın:

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

ICustomLayout arabirimi aşağıdaki özelliklere sahiptir:

pageSizeIPageSize- Rapor için tuval alanının sayfa boyutunu tanımlayan nesne.
```
interface IPageSize {
    type: PageSizeType;
}
```
IPageSize nesnesi, sayfa boyutunu ayarlamak için sabit listesi kullanırPageSizeType:
```
enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}
```
displayOptionDisplayOption- Tuvalin çerçeveye sığacak şekilde nasıl ölçeklendirildiğini denetleyan bir sabit listesi.
```
enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}
```
pagesLayout - Sayfadaki PagesLayout her görselin düzenini denetleen bir nesne. Bu özellik bir sayfa adını bir PageLayout nesneye eşler. Daha fazla bilgi için bkz. Sayfa düzeni tanımlama.
```
type PagesLayout = { [key: string]: IPageLayout; }
```

Sayfa düzeni tanımlama

IPageLayout Sayfa düzeni nesnesi tanımlamak için arabirimini kullanın. Arabirim, her görsel adı yeni bir düzen nesnesine ve varsayılan görsel düzenine eşleyen bir görsel düzen haritası tanımlamanızı sağlar. Sayfa düzeni tanımlamak isteğe bağlıdır. Bir rapor için düzen sağlamazsanız, Power BI rapora varsayılan düzeni uygular. Yani, varsayılan düzen, görsel düzeni nesnesinde belirtmediğiniz tüm görseller için geçerli olan düzendir. Örneğin, başlangıçta bir rapordaki tüm görselleri gizleyebilir ve ardından seçtiğiniz düzende seçili görselleri gösterebilirsiniz.

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

IPageLayout arabirimi aşağıdaki özelliklere sahiptir:

defaultLayoutIVisualLayout- Varsayılan görsel düzenini tanımlayan bir nesne. Varsayılan düzen, rapor sayfasındaki tüm görsellere otomatik olarak uygulanır.
```
defaultLayout?: IVisualLayout
```
visualsLayoutVisualsLayout- Rapor sayfasındaki görsel adlar ve görsel düzenler arasında bir eşleme tanımlayan nesne.
```
visualsLayout: VisualsLayout
```
```
VisualsLayout = { [key: string]: IVisualLayout; }
```

Görsel düzen tanımlama

Görsel bir düzen tanımlamak için arabirimini IVisualLayout kullanarak bir görsel düzen nesnesi oluşturun ve konumunu, boyutunu ve görünürlüğünü ayarlayın.

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

IVisualLayout arabirimi aşağıdaki özelliklere sahiptir:

x,y,z - Görselin x, y ve z koordinatlarını tanımlar.
width, height - Görselin genişliğini ve yüksekliğini tanımlar.
displayState - Görselin IVisualContainerDisplayState görünürlüğünü tanımlayan bir nesne.
```
interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}
```
IVisualContainerDisplayState nesnesi görünürlüğü ayarlamak için sabit listesi kullanırVisualContainerDisplayMode:
```
enum VisualContainerDisplayMode {
    Visible,
    Hidden
}
```

Düzeni güncelleştirme

Rapor zaten yüklendiğinde rapor düzenini güncelleştirmek için yöntemini kullanın report.updateSettings . Daha fazla bilgi için bkz . Çalışma zamanında rapor ayarlarını güncelleştirme.

Örnek

Bu tam kod örneği, özel bir rapor düzeniyle rapor eklemeyi gösterir. İki görsel dışında tüm görseller gizlenir: VisualContainer1 ve VisualContainer2. VisualContainer1 yeni bir düzene, konuma ve boyuta sahipken VisualContainer2 raporun varsayılan düzeniyle görünür.

// 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);

Sonraki adımlar

Sayfaları ve görselleri alma

Rapor ayarlarını yapılandırma