1

This is my first Salesforce project. I have created all the needed functionality, so now my work is down to styling. I've implemented a bootstrap tree structure I found online to hold my data. It works fine, but I need help tweaking it.

When a user selects a product, the tree loads the product's stories, issues, and their child tasks. Currently, when this data loads, everything is expanded.
How can I make it so that the child tasks are collapsed by default?

Below is my visualforce code. I don't think info from my controller is required to solve this problem.

Thanks for your time, any input is appreciated!

<apex:page controller="SprintPlannerBetaController" showHeader="true" sidebar="true" standardStylesheets="false" readOnly="true">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrapp css & Combined Css -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />

<script>
function treetoggler() {
$('label.tree-toggler').click(function () {
    $(this).parent().children('ul.tree').toggle(350); 
});    
}   
</script>
<script>
    $(document).ready(function () {
        treetoggler();
});
</script>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<apex:outputPanel id="test">
</apex:outputPanel>

<apex:pageBlock>
    <apex:pageBlockSection columns="2">
        <apex:form >  
            Products&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                <apex:selectList value="{!selectedProdId}" size="1">
                    <apex:selectOptions value="{!ProdSelectList}"></apex:selectOptions>
                    <apex:actionSupport event="onchange" reRender="a,b,test" oncomplete="treetoggler()"></apex:actionSupport>                 
                </apex:selectList>
                <p>
                    Related Sprints&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <apex:selectList value="{!selectedSprintId}" size="1" id="a">
                            <apex:selectOptions value="{!SprintSelectList}"></apex:selectOptions>
                            <apex:actionSupport event="onchange" reRender="b,test" oncomplete="treetoggler()"></apex:actionSupport>
                        </apex:selectList>
                </p>
                <p>
                    Story Status Select&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <apex:selectList value="{!selectedStoryStatusId}" size="4" id="storyStatusList" multiselect="true">
                        <apex:selectOptions value="{!storyStatusNames}"></apex:selectOptions>
                        <apex:actionSupport event="onchange" reRender="b,test" oncomplete="treetoggler()"></apex:actionSupport>
                    </apex:selectList>
                </p>
                <p>
                    Issue Status Select&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <apex:selectList value="{!selectedIssueStatusId}" size="4" id="issueStatusList" multiselect="true">
                        <apex:selectOptions value="{!issueStatusNames}"></apex:selectOptions>
                        <apex:actionSupport event="onchange" reRender="b,test" oncomplete="treetoggler()"></apex:actionSupport>
                    </apex:selectList>
                </p>
                <p>
                    <apex:inputCheckbox value="{!selectedMyStoriesAndIssues}">
                        My Stories And Issues
                        <apex:actionSupport event="onchange" reRender="test,b" oncomplete="treetoggler()"></apex:actionSupport>
                    </apex:inputCheckbox> 
                </p>


                <p> 
                    <apex:inputCheckbox value="{!selectedMyTasks}">
                        My Tasks
                        <apex:actionSupport event="onchange" reRender="test,b" oncomplete="treetoggler()" ></apex:actionSupport>
                    </apex:inputCheckbox>
                </p>
        </apex:form>

        <apex:outputPanel id="b" layout="block">
            <div class="well" style="width:1000px; padding: 8px 0;">
                <div style="overflow-y: scroll; overflow-x: hidden; height: 500px;">
                    <ul class="nav nav-list">

                        <li>
                            <label class="tree-toggler nav-header">Stories</label>
                            <ul class="nav nav-list tree">
                                <apex:repeat value="{!StoryWrapperThings}" var="swt">
                                    <apex:repeat value="{!swt.theStory}" var="story">
                                        <li>
                                            <label class="tree-toggler nav-header"><a href="/{!story.id}" target="_blank">
                                                {!story.Name}</a>&nbsp;{!story.Story_Name__c}&nbsp;|&nbsp;DEV&nbsp;-&nbsp;{!story.Dev_Owner__r.Name}&nbsp;|&nbsp;QA&nbsp;-&nbsp;{!story.QA_Owner__r.Name}&nbsp;|&nbsp;{!story.Status__c}
                                            </label>
                                            <ul class="nav nav-list tree">
                                                <apex:repeat value="{!swt.theTasks}" var="task">
                                                    <label>
                                                        <li><a href="/{!task.id}" target="_blank">
                                                        {!task.Name}</a>&nbsp;{!task.Task_Name__c}&nbsp;|&nbsp;OWNER&nbsp;-&nbsp;{!task.Task_Owner__r.Name}&nbsp;|&nbsp; {!task.Status__c} </li>
                                                    </label>
                                                </apex:repeat>       
                                            </ul>
                                        </li>
                                    </apex:repeat>
                                </apex:repeat>
                            </ul>
                        </li>

                        <li class="divider"></li>
                        <li>
                            <label class="tree-toggler nav-header">Issues</label>
                            <ul class="nav nav-list tree">
                                <apex:repeat value="{!IssueWrapperThings}" var="iwt">
                                    <apex:repeat value="{!iwt.theIssue}" var="issue">
                                        <li>
                                            <label class="tree-toggler nav-header"><a href="/{!issue.id}" target="_blank">
                                                {!issue.Name}</a>&nbsp;{!issue.Issue_Name__c}&nbsp;|&nbsp;DEV&nbsp;-&nbsp; {!issue.Dev_Owner__r.Name} &nbsp;|&nbsp;QA&nbsp;-&nbsp; {!issue.QA_Owner__r.Name}&nbsp;|&nbsp; {!issue.Status__c}
                                            </label>
                                            <ul class="nav nav-list tree">
                                                <apex:repeat value="{!iwt.theTasks}" var="task">
                                                    <label>
                                                        <li><a href="/{!task.id}" target="_blank">
                                                            {!task.Name}</a>&nbsp;{!task.Task_Name__c}&nbsp;|&nbsp;OWNER&nbsp;-&nbsp;{!task.Task_Owner__r.Name}&nbsp;|&nbsp; {!task.Status__c} </li>
                                                    </label>
                                                </apex:repeat>     
                                            </ul>
                                        </li>
                                    </apex:repeat>
                                </apex:repeat>
                            </ul>
                        </li>

                    </ul>
                </div>
            </div>
        </apex:outputPanel>
    </apex:pageBlockSection>
</apex:pageBlock>

2
  • Here they did what you are asking for with a css rule: stackoverflow.com/questions/20596356/… Mar 4 '16 at 19:49
  • Ah, thanks for the response, @SteveMunLeeuw! It's on the right track but I still have issues. I've added <style type="text/css"> .tree li ul > li { display: none;} </style> to my code. Now when the information loads, the tasks are collapsed, but when I click them they don't expand. Any advice? Sorry, I'm very new to css. Mar 4 '16 at 20:15
1

Just toggle everything to collapse after you call the toggle function in your document ready. Pretty sure this should work.

$('label.tree-toggler').parent().children('ul.tree').toggle(1000);
3
  • Great, thank you! Since I am refreshing output panels, I put this in its own function and called it in my oncompletes. It collapses everything by default, but that definitely put me on the right path. Mar 5 '16 at 6:14
  • There Re a few different ways you an accomplish what you want using jquery. Just depends how you want it to all work. You can also dynamically add/modify CSS classes so you could manipulate all kinds of stuff besides just the toggle Mar 5 '16 at 6:17
  • I got it to work the way I want by messing with the label classes. Thanks! Mar 5 '16 at 7:36

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.