[SalesForce] Passing a javascript variable value to component attribute value

I have a VF custom component with attribute called chartHeight.
I need to assign chartHeight a value from the VF page the component resides in, and this value should be screen.availHeight retrived using from JS.
How can I pass screen.availHeight as the atrribute's value?

<c:PartitionChart JsonData="{!JsnString}" chartHeight=**<need to pass this>** chartWidth="800"/>


<apex:attribute name="chartHeight" description="Chart Height" type="integer" required="true" />

Best Answer

On principle, it's a shame to hand the browser dimensions to a server-side component.

But you can definitely do this as a multi stage process if you really have to:

render your empty page, first determining the viewport size using JavaScript,
populate some hidden form field with that height and invoke an actionFunction,
use the actionFunction rerender to draw your chart component using the newly persisted height.

image-size

The general idea is to grab the window size of the browser, transmit it to the server in a form submission and then draw the chart using a {!Height} controller property, like this:

<apex:page controller="ChartHeightController">
    <apex:form>

        <apex:inputHidden id="Field" value="{!Height}" />
        <apex:actionFunction name="doResize" rerender="chart" />
        <c:PartitionChart id="chart" JsonData="{!JsnString}" chartHeight="{!Height}" chartWidth="800" />

        <script>
            var windowOnload = window.onload;
            window.onload = function() {
                if (windowOnload) windowOnload(); //be nice, don't trash existing onload
                document.getElementById('{!$Component.Field}').value = window.innerHeight;
                doResize();
            }
        </script>

    </apex:form>
</apex:page>

The controller just provides a dumb target for the height to hang around in the viewstate.

public class ChartHeightController {

    public Integer Height {get; set;}

}

Related Solutions

[SalesForce] Does the assignTo attribute of apex:attribute not work for ApexPages.Action or PageReference types

One mechanism for doing this would be to pass the page controller instance as the parameter to the component and then the component can call the page controller's methods itself via that reference.

Here is a functional example:

Page Controller

public with sharing class TestPageController {

    public TestPageController selfReference { get; set; }

    public Integer myInteger { get; set; }
    public String myString { get; set; }

    public TestPageController() {
        this.myInteger = 1;
        this.myString = String.valueOf(this.myInteger);
        selfReference = this;
    }

    public PageReference myStringAction() {
        // increment the integer and add it to the string
        this.myInteger += 1;
        this.myString += ', ' + String.valueOf(this.myInteger);
        return null;
    }
    public PageReference myRedirectAction() {
        // this essentially is doing a 'reset'
        PageReference pRef = Page.TestPage;
        pRef.setRedirect(true);
        return pRef;
    }
}

Component Controller

public with sharing class TestComponentController {

    public TestPageController thePageController { get; set; }

    public PageReference doPageControllerAction1() {
        return thePageController.myStringAction();
    }

    public PageReference doPageControllerAction2() {
        return thePageController.myRedirectAction();
    }
}

Component Markup (TestComponent.component)

<apex:component controller="TestComponentController" >
    <apex:attribute name="PageController" type="TestPageController" assignTo="{!thePageController}" required="true" description="the root page controller reference" />

    <p>The Component Body</p>
    <p>via local component controller methods by reference</p>
    <apex:commandButton action="{!doPageControllerAction1}" value="Fire Page Controller Action 1 (string) through component controller method" /><br />
    <apex:commandButton action="{!doPageControllerAction2}" value="Fire Page Controller Action 2 (redirect) through component controller method"/><br />

    <p>via Component Attribute's Name property reference</p>
    <apex:commandButton action="{!PageController.myStringAction}" value="Fire string action method through attribute name reference" /><br />

    <p>via direct reference through value set by 'assignTo' on attribute</p> 
    <apex:commandButton action="{!thePageController.myStringACtion}" value="Fire string action through controller reference" /><br />

    <p>data retrieved via component controller's pagecontroller reference</p>

    MyInteger: <apex:outputText value="{!thePageController.myInteger}" /><br />
    MyString: <apex:outputText value="{!thePageController.myString}" /><br />
</apex:component>

Page Markup (TestPage.page)

<apex:page controller="TestPageController" >
    <p>the myString value will be concatenated each time an action fires with the current myInteger value</p>
    <apex:form> 
        <c:TestComponent PageController="{!selfReference}" />
    </apex:form>
</apex:page>

[SalesForce] assignTo attribute not setting value to contoller variable

It is sent to salesforce as a name,value pair. If it doesn't have a name, it isn't available. It is not required because <apex:param> has other uses to like in <apex:outputText>. The value is therefore the only required field.

Best Answer

Related Solutions

[SalesForce] Does the assignTo attribute of apex:attribute not work for ApexPages.Action or PageReference types

[SalesForce] assignTo attribute not setting value to contoller variable

Related Topic