Configuring capabilities

Step by step guide how to build React-based Custom Visual

1. Open capabilities.json. Remove Category Data object from dataRoles. ReactCircleCard will display a single value, so we need only Measure Data.

    "dataRoles": [
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }
    ],
   

2. Remove all the content of objects key. It will be filled in later.

        "objects": {},
   

3. Copy the following code of dataViewMappings property. Pay attention to condition: max: 1 It means that the only one measure column can be submitted.

        "dataViewMappings": [
            {
                "conditions": [
                    {
                        "measure": {
                            "max": 1
                        }
                    }
                ],
                "single": {
                    "role": "measure"
                }
            }
        ]
   

4. Now you can drag some data from Fields pane into the visual settings.

   

The next step of tutorial will describe how to render data using React.