JSON - pageNavigator Visual - StyleNames & CardNames

[jpmuk]

Hi, 

I'm currently working on a corporate JSON file for our PBI theming and whilst I have found a wealth of resource for everything else, I cannot find any resources online that contain what StyleNames and CardNames will work in order to set the parameters of the look of the PageNavigator element. 

Whilst I have found the VisualName of 'pageNavigator', I cannot find anything to adjust the shape, grid layout etc in order to make this work. 

Global properties for my JSON file such as font are already set so it is only those that specifically affect the design of the navigator elements I require. 

Has anyone had success with this?

[MilesNewey]

So every time I try and add the pageNavigator code into the JSON file, it doesn't work - admittedly, I haven't a clue what I am doing - all I want to do is to default all fonts to helvetica, no matter what it is, table, graph, anything....can anyone help? This is the current state of my JSON file:

{
"name":"IWP",
"dataColors":["#5F9C42","#116035","#58B672","#028E0B","#71C0A7","#57B956","#478F48","#B0F6B2","#3599B8","#DFBFBF","#4AC5BB","#5F6B6D","#FB8281","#F4D25A","#7F898A","#A4DDEE","#FDAB89","#B687AC","#28738A","#A78F8F","#168980","#293537","#BB4A4A","#B59525","#475052","#6A9FB0","#BD7150","#7B4F71","#1B4D5C","#706060","#0F5C55","#1C2325"],
"tableAccent":"#094782",
"maximum":"#094782",
"center":"#326633",
"minimum":"#A8AAAD",
"visualStyles":{"*":{"*":{"*":[{"fontsize":12,"fontFamily":"Helvetica","color":{"solid":{}}}],
								"background":[{"color":{"solid":{"color":"#F2F9EC"}},"transparency":100}]}},
								"page":{"*":{"background":[{"color":{"solid":{"color":"#FCF4E7"}},"transparency":0}],
								"outspace":[{"color":{"solid":{"color":"#F9F9F9"}}}]}}},
								"foregroundNeutralSecondary":"#54595F",
								"background":"#F9F9F9",
								"backgroundNeutral":"#5F982F",
								"backgroundLight":"#FAFAFA",
								"foregroundNeutralTertiary":"#795C2E",
								"textClasses":{"title":{"color":"#795C2E",
								"fontFace":"Helvetica"},
								"label":{"fontFace":"Helvetica"},
								"callout":{"fontFace":"Helvetica"},
								"header":{"fontFace":"Helvetica"}}}

As soon as I add the code though, it doesn't work.....with the code added it looks like this:

{
"name":"IWP",
"pageNavigator": {"*": {"shape": [{"$id": "default","roundEdge": 25,"tileShape": "rectangleRounded"}]}},
"dataColors":["#5F9C42","#116035","#58B672","#028E0B","#71C0A7","#57B956","#478F48","#B0F6B2","#3599B8","#DFBFBF","#4AC5BB","#5F6B6D","#FB8281","#F4D25A","#7F898A","#A4DDEE","#FDAB89","#B687AC","#28738A","#A78F8F","#168980","#293537","#BB4A4A","#B59525","#475052","#6A9FB0","#BD7150","#7B4F71","#1B4D5C","#706060","#0F5C55","#1C2325"],
"tableAccent":"#094782",
"maximum":"#094782",
"center":"#326633",
"minimum":"#A8AAAD",
"visualStyles":{"*":{"*":{"*":[{"fontsize":12,"fontFamily":"Helvetica","color":{"solid":{}}}],
								"background":[{"color":{"solid":{"color":"#F2F9EC"}},"transparency":100}]}},
								"page":{"*":{"background":[{"color":{"solid":{"color":"#FCF4E7"}},"transparency":0}],
								"outspace":[{"color":{"solid":{"color":"#F9F9F9"}}}]}}},
								"foregroundNeutralSecondary":"#54595F",
								"background":"#F9F9F9",
								"backgroundNeutral":"#5F982F",
								"backgroundLight":"#FAFAFA",
								"foregroundNeutralTertiary":"#795C2E",
								"textClasses":{"title":{"color":"#795C2E",
								"fontFace":"Helvetica"},
								"label":{"fontFace":"Helvetica"},
								"callout":{"fontFace":"Helvetica"},
								"header":{"fontFace":"Helvetica"}}}

Anyone wanna have a go at shedding some light on this?

[msommerf]

@jpmuk The following should work for you:

 "pageNavigator": {
            "*": {
                "border": [
                    {
                        "show": false
                    }
                ],
                "title": [
                    {
                        "show": false
                    }
                ],
                "visualHeader": [
                    {
                        "show": false
                    }
                ],
                "outline": [
                    {
                        "show": false
                    },
                    {
                        "$id": "default",
                        "transparency": 0,
                        "lineColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "weight": 2
                    },
                    {
                        "$id": "hover",
                        "transparency": 0,
                        "lineColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "weight": 2
                    },
                    {
                        "$id": "press",
                        "transparency": 0,
                        "lineColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "weight": 2
                    },
                    {
                        "$id": "selected",
                        "transparency": 0,
                        "lineColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "weight": 2
                    },
                    {
                        "$id": "disabled",
                        "transparency": 0,
                        "lineColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "weight": 1
                    }
                ],
                "fill": [
                    {
                        "show": true
                    },
                    {
                        "$id": "default",
                        "transparency": 0,
                        "fillColor": {
                            "solid": {
                                "color": "#E6E6E7"
                            }
                        }
                    },
                    {
                        "$id": "hover",
                        "transparency": 0,
                        "fillColor": {
                            "solid": {
                                "color": "#E6E6E6"
                            }
                        }
                    },
                    {
                        "$id": "press",
                        "transparency": 0,
                        "fillColor": {
                            "solid": {
                                "color": "#E6E6E6"
                            }
                        }
                    },
                    {
                        "$id": "selected",
                        "transparency": 0,
                        "fillColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        }
                    },
                    {
                        "$id": "disabled",
                        "transparency": 0,
                        "fillColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        }
                    }
                ],
                "text": [
                    {
                        "show": true
                    },
                    {
                        "$id": "default",
                        "fontFamily": "wf_standard-font, helvetica, arial, sans-serif",
                        "fontSize": 8,
                        "fontColor": {
                            "solid": {
                                "color": "#000000"
                            }
                        },
                        "horizontalAlignment": "center",
                        "verticalAlignment": "middle"
                    },
                    {
                        "$id": "hover",
                        "fontSize": 8,
                        "fontColor": {
                            "solid": {
                                "color": "#000000"
                            }
                        },
                        "fontFamily": "wf_standard-font, helvetica, arial, sans-serif"
                    },
                    {
                        "$id": "press",
                        "fontSize": 8,
                        "fontColor": {
                            "solid": {
                                "color": "#000000"
                            }
                        },
                        "fontFamily": "wf_standard-font, helvetica, arial, sans-serif"
                    },
                    {
                        "$id": "selected",
                        "fontSize": 8,
                        "fontColor": {
                            "solid": {
                                "color": "#000000"
                            }
                        },
                        "fontFamily": "wf_standard-font, helvetica, arial, sans-serif"
                    },
                    {
                        "$id": "disabled",
                        "fontSize": 8,
                        "fontColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "fontFamily": "wf_standard-font, helvetica, arial, sans-serif"
                    }
                ],
                "pages": [
                    {
                        "showHiddenPages": true,
                        "showTooltipPages": false
                    }
                ],
                "shape": [
                    {
                        "$id": "default",
                        "roundEdge": 4,
                        "tileShape": "rectangleRounded"
                    }
                ],
				 "layout": [
                    {
                        "alignment": "center",
                        "orientation": 2,
                        "cellPadding": 2,
                        "rowCount": 1,
                        "columnCount": 1
                    }
                ]
				
            }
        },

[thart]

I have found the solution:

        "pageNavigator": {
            "*": {
                "shape": [
                    {
                        "$id": "default",
                        "roundEdge": 25,
                        "tileShape": "rectangleRounded"
                    }
                ],
                ...
            }
        }

[v-luwang-msft]

HI @MarvinVitcu ,

Has your problem been solved, if so, please consider Accept a correct reply as the solution or share your own solution to help others find it.

Best Regards
Lucien

[MarvinVitcu]

Here you go 🙂

"pageNavigator": {
         "*": {
                 "border": [{
                       "show": false
                  }],
                  "title": [{
                         "show": false
                  }],
                  "visualHeader": [{
                          "show": false
                  }],
                  "outline": [{
                            "show": false
         },{
              "$id": "default",
              "transparency": 0,
              "lineColor": {"solid":{"color":"#FFFFFF"}},
              "weight": 2
        },{
              "$id": "hover",
              "transparency": 0,
              "lineColor": {"solid":{"color":"#FFFFFF"}},
              "weight": 2
        },{
              "$id": "press",
              "transparency": 0,
              "lineColor": {"solid":{"color":"#FFFFFF"}},
              "weight": 2
        },{
              "$id": "selected",
              "transparency": 0,
              "lineColor": {"solid":{"color":"#FFFFFF"}},
              "weight": 2
},{
              "$id": "disabled",
              "transparency": 0,
              "lineColor": {"solid":{"color":"#FFFFFF"}},
              "weight": 1
        }],
          "fill": [{
                   "show": false
         },{
             "$id": "default",
             "transparency": 0,
             "fillColor": {"solid":{"color":"#FFFFFF"}}
},{
             "$id": "hover",
             "transparency": 0,
             "fillColor": {"solid":{"color":"#FFFFFF"}}
},{
            "$id": "press",
            "transparency": 0,
            "fillColor": {"solid":{"color":"#FFFFFF"}}
},{
          "$id": "selected",
          "transparency": 0,
          "fillColor": {"solid":{"color":"#FFFFFF"}}
},{
         "$id": "disabled",
         "transparency": 0,
         "fillColor": {"solid":{"color":"#FFFFFF"}}
}],
          "text": [{
                   "show": true
            },{
                 "$id": "default",
                 "fontFamily": "Arial",
                 "fontSize": 9,
                 "fontColor": {"solid":{"color":"#FFFFFF"}},
                 "horizontalAlignment": "center",
                 "verticalAlignment": "middle"
},{
                   "$id": "hover",
                   "fontSize": 9,
                   "fontColor": {"solid":{"color":"#FFFFFF"}},
                   "fontFamily": "Arial"
},{
               "$id": "press",
               "fontSize": 9,
               "fontColor": {"solid":{"color":"#FFFFFF"}},
               "fontFamily": "Arial"
},{
               "$id": "selected",
               "fontSize": 10,
               "fontColor": {"solid":{"color":"#FFFFFF"}},
               "fontFamily": "Arial"
},{
             "$id": "disabled",
             "fontSize": 9,
             "fontColor": {"solid":{"color":"#FFFFFF"}},
             "fontFamily": "Arial"
}],
              "pages" :[{
                           "showHiddenPages": false,
                           "showTooltipPages": false
               }]
   }
}

[jpmuk]

Hi MarvinVitcu, 

have you any idea how we could set the default shape of the navigation button? we're manually having to shift this to rounded rectangle each time, so curious if this can be added into the json spec?

[MarvinVitcu]

Hey 🙂

I tried a lot of different names for the properties. It seems there is no option to specify the default shape of the navigation in the json theme.

[v-luwang-msft]

HI @jpmuk ,

Unfortunately, I was unable to find any documentation on this topic.

REFER:

https://powerbidocs.com/2022/01/09/page-navigator-in-power-bi/ 

Best Regards

Lucien