0

Requirement: A visualpage will have a button, which can be clicked 10 times, each time a new section is created. Each section has a static section and a dynamic section in which Case fields needs to be rendered. In static sections fields are constant i.e there will be always two fields shown, but in dynamic section, fields are dynamic i.e.there can be 4 fields or 7 fields based on the an object query.

Design followed: We have two visual force pages created, one to have an empty div and another has both section code. Static section code is not written in apex repeat, but dynamic section has been written in apex repeat like this.

<div class="slds-grid slds-gutters">
    <div class="slds-col slds-size_6-of-12">
        <div class="form-group">
            <label for="idInputFieldType" class="card-text">{!$Label.CaseType} :&nbsp;</label>
            <apex:outputField id="idInputFieldType" value="{!objCaseRule.CaseType__c}" styleClass="form-control maskField"/>
        </div>
    </div>
    <div class="slds-col slds-size_6-of-12">
        <div class="form-group">
            <label for="idInputFieldSubType" class="card-text">Sub-Type :&nbsp;</label>
            <apex:outputField id="idInputFieldSubType" value="{!objCaseRule.CaseSubType__c}" styleClass="form-control maskField"/>
        </div>
    </div>
</div>

<ul>
    <apex:outputPanel id="outerOutput">
        <apex:repeat value="{!lstSections}" var="objSections">
            <li class="slds-box" style="margin-bottom:10px;">
                <h3>{!objSections.title}</h3>
                <div class="container-fluid" data-columnNumber="{!objSections.columnNumber}">
                    <div class="slds-grid slds-gutters">
                        <apex:repeat value="{!mapOfDynamicSection[objSections.Id]}" var="sectionFields">
                            <div class="slds-col slds-size_6-of-12">
                                <apex:variable var="c" value="{!sectionFields.caseAPI__c}"/>
                                <label>{!sectionFields.label__c}
                                    <apex:inputField value="{!Case[c]}"/>
                                </label>

                            </div>
                        </apex:repeat>
                    </div>
                </div>
            </li>
        </apex:repeat>
    </apex:outputPanel>
</ul>

lstSections -> List of sections which needs to be shown. mapOfDynamicSection- > Map of dynamic section, key is objSections and value is the list of dynamic sections.

Main Visualforce page looks like this :

<div id="pageTemplate" class="hidden">
    <apex:include pageName="DynamicSectionPage"/>
</div>

<div id="pagesectionWrapper">

</div>

and javascript for button looks like this:

function createNewCaseSection() {
    var objCaseSection = $("#pageTemplate").html();
    let intCaseNumber = $("#pagesectionWrapper .section").length;
    if (intCaseNumber < 10) {
        $("#pagesectionWrapper").prepend(objCaseSection);

    }
}

We are creating the dynamic section and then dumping it on the first page to be displayed.

The action function to fetch the dynamic section based on the values in the static section's type and subtype is written in the first page, The action function is called but the reRender is not working properly as it does not know what to rerender. Lets say there are 5 sections opened and user changed the fixed section of 4th section, then only 4th section's dynamic section should get refreshed.

Any way to do that? Or change design? Any suggestions?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.