Custom Theme - Add a Cover Page using JSON

[MJG2112]

Hi.  I'm using a custom theme I've created, which defines the colour palette, background, custom icons etc.

When I apply it to a new blank report, I’d like it to insert a cover page using a template I’ve created and converted to base64.

Can this be done in the JSON script?

[MJG2112]

@Hans-Georg_Puls Thanks for replying.  Let me explain a little better than I did.  This is a section from my script.

"visualStyles": {

        "*": {

            "*": {

                "background": [

                    {

                        "image": {

                            "name": "Dark",

                            "scaling": "Fit",

                            "url": "data:image/svg+xml;base64,PHN2ZyB3a==”

                                                },

                        "transparency": 0,

                        "color": {

                            "solid": {

                                "color": "#272936"

                            }

                        }

                    }

                ],

             }

        },

       "page": {

            "*": {

                "background": [

                    {

                        "color": {

                            "solid": {

                                "color": "#FFFFFF"

                            }

                        },

                        "transparency": 0

                    }

                ]

            }

        }

    }

The first "background" section takes an image with corporate logos etc and uses it as the canvas background on the blank page of a new report.  What I want to do in JSON is insert a page in front of that blank page (my cover page) with a different image.  I'm not sure what the "page" section in my script actually does 🤔

[Hans-Georg_Puls]

Hi @MJG2112 ,

your first background section is valid as a default for every visual (not only pages) with no specific background setting. If you want that background setting only for pages I would recommend to use the notation of the second background section. 

I'm not sure if I understand your requirements correctly:

• Do you want that different image only at the first page of a new report or on every page?
• Do you want that different image permanently on top of your background image or should it disapear by user interaction (e.g. a clicking on a close button)?

I will at least share some thoughts with you:

• It is not possible to place a Power BI page on top of another Power BI page!
• Is it an option to make one image from your canvas background and the cover page and use that as canvas background?
• You could define your cover page as a default background for every image visual in your theme file. Adding an image visual to your page would show the cover image on top of the canvas background. You could even create a template Power BI Project with such an image included.

Hope that helps a little bit.

[Hans-Georg_Puls]

Hi @MJG2112 ,

try the following:

• Add the following section to your theme json file "visualStyles" section:

        "page": {

            "*": {

                "background": [

                    {

                        "show": true,

                        "image": {

                            "name": "cover image",

                            "url": "data:image/gif;base64,R0lGODlhTwARANUAAMDK07/K0rK/ybzH0LbDzLG+yMLM1bPAybPAysDL1LnFzsLN1b7J0bC+yLbCy7XBy7TBy7K/yL3I0bC9yLvGz7fDzbrGz73J0brGzrzI0bjEzb/J0bfDzLXCy7LAybG/yLnEzrTAy7nGzrjDzbzG0LzI0LjEzrTAyrC9x7bDy6+9x7/J0sHL1MHM1MDL07/K08LM1MPN1QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAABPABEAAAb/QNhqgFFoCEiORoEZrGCxaGzRCgCEkIIFCmO9ErCFa0A4RA6IhwPp6EAQAkHIxOACXtCYK9UAwWBWeVJwEQJoIQ8PJwgHAoUIFRKCMC94LSMTHHmULyxQBi0bAwoVBA6nBBoYGXhRMC4vLnkrjQMLLAFgUi4WaxgSslJSMAASIgQRDQgDmy4BLTEKDQ4vrgkBX3/C28IwLbAv0FEDhnUAz7sayQjbBn9/BtsuFA8FEBJSLCssBuQIG8O8VHLBosW7gy0S3HkBoEW8GDAwTLtSKU8LBY4i/WEBrpJHjy4MxoMxIIsGFlFaMBSCYAIJQe4SLvxYCQBBbbsIqNDwZ2UU/wZZKqxwhY2gwYPeOL7ApqsFhgkQhkKs6IJDBAJSuyE9uGAbSUYUvK1IEK+fsgvuiD0RxG2Ytxcrgkk44GGAK1gGKTQCUa2tX1cXHBR4UAdvyhENCMhSGZftX2ELiOWi5KCBgigGvLBY8IJAAw8ESrh47GqFhXoCtnDK4wJCAxE9O7FNi2vFimfwuK2GUSETyhgtGsdgMALOgQcVRAy4wGAFAwkUFBA44UEABAsoV0e5cKBAiRgJYrHNAOLBgQ8F0qv/cKCDAgmehjkzaCFCVFeVHALPIP1NozhxoIGcBRtwAUt8C1BgXYEurCAOUQ0c4AAIFgwwQAYZWGiBCR0cMP9BAQRcIIgXsjAQxwWu4BJOMwEwcIEEGUhwwQrhDJMAjZsogAIBnlS0CwUhTCDcX69soICHHUiC3xUBPPCBBTZWAkZu20T2RwvnrBiFC4Ip8EcAweiBgQcTPEACRO+0wMKaLRyFUwsDhJBYAPhZUkEBFTzoTUc2rblmAi7MNKUUDCAQwQCZBbAZRAMggOcTetAkKUgGQaTXodbgpsAEHTDgVVIuBAqATQl4AsNDrlAQQQTmtAIRBwV0OkUXN4XBjZUsLBTMC655GYU+/FyAwAcKPEhaWxsIxoEsPsbQ5AReUrFUX8e6opJ4MIBQgAOjTSULABo0IAAGYVYLwwYcTIA9QFiUXBFFBh4ckMFU4nVVrTDu5LfAAB8gIJV2DBCQHgEUMACAqae+44wECgR5gAIu3DLWSBQ08AAesJQbBAA7",

                            "scaling": "Fit"

                        },

                        "transparency": 0

                    }                

                ]

            }

        }

• Replace the base64 (its just a demo pattern) with yours and change the image/gif to image/png or whatever your need
• Load the json as theme into your power bi report
• Could be necessary to do a "Reset to default" at Format->Canvas background

Does this work for you and meet your requirements? Then feel free to give me a kudo or even accept this post as a solution.