@@ -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 }) => {
186186export 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
191259Inside your component where you're using { Report } component.
0 commit comments