CODEWITHSUNDEEP
cssdynamics-crmdynamics-365powerapps-component-framework
3iL
3iL

Reputation: 2176

How to get inline CSS of a PCF control in a D365 form?

I have a PCF control on a form in Dynamics 365. I want to get the inline CSS of that PCF control on save event of the form. So far I've tried this code to get the CSS but it always falls on the first else statement and prints "Control not found.":

var control = formContext.getControl("myControlName"); //I am copying the control name from the data-id tag
if (control) {

    var controlElement = document.querySelector(`[data-id='${control.getName()}-field']`);
    if (!controlElement) {
        console.log("Attempting to locate DOM using parent container..."); // Log the surrounding HTML for debugging
        //console.log("Outer HTML:", document.body.);
        const myDiv = document.getElementById('inputField');
        const style = window.getComputedStyle(myDiv);
        console.log(style.border);
    }
    if (controlElement) {
        // Retrieve the computed styles
        var computedStyle = window.getComputedStyle(controlElement);

        // Example: Get specific CSS properties
        console.log("Background color:", computedStyle.backgroundColor);
        console.log("Font size:", computedStyle.fontSize);
        console.log("Width:", computedStyle.width);
        console.log("Height:", computedStyle.height);
    } else {
        console.log("Control DOM element not found.");
    }
} else {
    console.log("Control not found.");
}

Upvotes: 0

Views: 42

Answers (1)

Rizky Ismail
Rizky Ismail

Reputation: 9

Make sure the data-id attribute matches the control name you are using.

function onSaveEvent(executionContext) {
    var formContext = executionContext.getFormContext();

    // Get the control from the form
    var control = formContext.getControl("myControlName"); // Your data-id
    if (control) {
        console.log("Control found:", control.getName());

        // Locate the DOM element for the control
        var controlElement = document.querySelector(`[data-id='${control.getName()}-field']`);

        if (!controlElement) {
            console.log("Attempting to locate DOM using parent container...");

            // If the controlElement isn't directly found, try locating the parent container
            controlElement = document.querySelector(`[data-id='${control.getName()}']`);
        }

        if (controlElement) {
            console.log("Control DOM element found:", controlElement);
            console.log(controlElement.outerHTML); // Log HTML

            // Retrieve the computed styles of the DOM element
            var computedStyle = window.getComputedStyle(controlElement);

            // Example: Log some CSS properties
            console.log("Background color:", computedStyle.backgroundColor);
            console.log("Font size:", computedStyle.fontSize);
            console.log("Width:", computedStyle.width);
            console.log("Height:", computedStyle.height);
        } else {
            console.log("Control DOM element not found.");
        }
    } else {
        console.log("Control not found.");
    }
}

Log HTML you can add console.log(controlElement.outerHTML) when an element is found to ensure it's the correct one.

Upvotes: -1

Related Questions