Skip to content

Commit 61d5194

Browse files
committed
Add docs for custom layout
1 parent 941e5bd commit 61d5194

File tree

1 file changed

+69
-1
lines changed

1 file changed

+69
-1
lines changed

README.md

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ const MyReport = ({ accessToken, embedUrl, embedId }) => {
158158
accessToken: accessToken,
159159
embedUrl: embedUrl,
160160
embedId: embedId,
161-
settings: {
161+
extraSettings: {
162162
filterPaneEnabled: false,
163163
navContentPaneEnabled: false,
164164
},
@@ -186,6 +186,74 @@ const MyReport = ({ accessToken, embedUrl, embedId }) => {
186186
export default MyReport;
187187
```
188188

189+
## Passing in custom layout for useReport hook.
190+
191+
Example is taken from powerbi js wiki: [Custom-Layout](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Custom-Layout).
192+
193+
```javascript
194+
import { models } from 'powerbi-client'; // Import from the dependency
195+
196+
// Example layout config
197+
const layoutSettings = {
198+
layoutType: models.LayoutType.Custom,
199+
customLayout: {
200+
pageSize: {
201+
type: models.PageSizeType.Custom,
202+
width: 1600,
203+
height: 1200,
204+
},
205+
displayOption: models.DisplayOption.ActualSize,
206+
pagesLayout: {
207+
ReportSection1: {
208+
defaultLayout: {
209+
displayState: {
210+
mode: models.VisualContainerDisplayMode.Hidden,
211+
},
212+
},
213+
visualsLayout: {
214+
VisualContainer1: {
215+
x: 1,
216+
y: 1,
217+
z: 1,
218+
width: 400,
219+
height: 300,
220+
displayState: {
221+
mode: models.VisualContainerDisplayMode.Visible,
222+
},
223+
},
224+
VisualContainer2: {
225+
displayState: {
226+
mode: models.VisualContainerDisplayMode.Visible,
227+
},
228+
},
229+
},
230+
},
231+
},
232+
},
233+
};
234+
235+
// Create your config
236+
const myReportConfig = {
237+
embedType: 'report',
238+
tokenType: 'Embed',
239+
accessToken: accessToken,
240+
embedUrl: embedUrl,
241+
embedId: embedId,
242+
extraSettings: {
243+
filterPaneEnabled: false,
244+
navContentPaneEnabled: false,
245+
...layoutSettings, // layout config
246+
},
247+
};
248+
249+
250+
// Inside your component
251+
useEffect(() => {
252+
setEmbed(reportRef, myReportConfig);
253+
}, []);
254+
255+
```
256+
189257
## Report features and props you can pass into the component
190258

191259
Inside your component where you're using { Report } component.

0 commit comments

Comments
 (0)