Using containers in a Custom Visual

[Anonymous]

Hi,

I am currently trying to use containers to group properties per measure group. 

Unfortunately, I can see the dropdown on the properties pane but its empty... nothing gets assigned to it.

Anyone using this feature that could provide an example? It would be great to have this sample on the documentation.

Thank you

Regards

LS

[dm-p]

Hi there,

Are you looking to have a dropdown to display the measures in your visual and then display properties based on selection, kind of like the core visuals? If so, last time this asked, it wasn't supported.

However... I do see that Power KPI is open source now, and this may have some of the functionality you're after. I agree that an example of this would be very helpful!

I don't have a lot of time to dive fully into this right now and I've been saving such an activity for a rainy day. I've done a quick analysis and followed some breadcrumbs in the code and this might guide you in the right direction:

• The Line menu has a measure selector, but that enum is not defined in the capabilities for that menu.
• The settings.ts definition for the line menu points to the LineDescriptor class, which extends from the BaseDescriptor class.
• This portion of the visual settings processing looks like it assigns the values to the dropdown and then the subsequent enumerateSettingsDeep() and applySettings() calls apply this to the properties pane.

I hope that this might be helpful in some capacity, and if you get moving, let us know how you get on! It would be great to see if someone else is able to get this stuff working.

Good luck,

Daniel

[jppp]

Indeed, my last attempt of dynamic dropdowns failed as I do believe it is still not supported: the result of the enumerateObjectInstances method doesn't parse metadata and dropdowns are defined as static metadata 😞

But you can create a loop to populate the same settings for multiple field values. I have create a method(s) to do this like this one: 

public dataShapesEnumerateObjectInstances(dataPoints: ChartDataPoint[]): VisualObjectInstance[] {
    let instances: VisualObjectInstance[] = [];
    dataPoints.forEach((dataPoint: chartDataPoint, index: number) => {
        instances.push({
            displayName: `${dataPoint.label} - line size`,
            objectName: "shapes",
            selector: { id: index.toString(), metadata: undefined },
            properties: {
                strokeWidth: dataPoint.lineSize
            }
        });
        instances.push({
            displayName: `${dataPoint.label} - line type`,
            objectName: "shapes",
            selector: { id: index.toString(), metadata: undefined },
            properties: {
                lineStyle: dataPoint.lineStyle // defined as enum inline with capabilities.json
            }
        });
    });
    return instances;
}

Call it in enumerateObjectInstances 

via instances = this.dataColorsEnumerateObjectInstances(this.data.dataPoints);

And define the metadata in capbilities.json:

"shapes": {
    "displayName": "Shapes",
    "properties": {
        "strokeWidth": {
            "displayName": "Stroke size",
            "type": {
                "numeric": true
            }
        },
        "lineStyle": {
            "displayName": "Line style",
            "type" : {
                "enumeration": [
                    {
                        "value": "0",
                        "displayName": "Dashed"
                    },
                    {
                        "value": "1",
                        "displayName": "Solid"
                    },
                    {
                        "value": "2",
                        "displayName": "Dotted"
                    }
                ]
            }
        }
    }
}

This should result in a (long) list of the same properties grouped per field value, in your case the content of the calculation groups.

-JP

[dm-p]

I've created an idea for this, as there didn't seem to be one already. Not sure if it will get any traction, but if you'd like to vote, go nuts!