1

I need to create a page that list Accounts with a field name Level (level__c) with 3 options (level1, level2 and level3). The lists let you perform drag and drop that can change the account to another level dragging the account name to another list (this is done by jqueryUI). I have no idea how I save the changes using apex. Any solution? tutorial? help?

Thank you so much! best regards

My page:

<apex:page controller="TheController">

<!--action="{!load}">-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>   
    <script>
      $( function() {
        $( "#sortable1, #sortable2" ).sortable({
          connectWith: ".connectedSortable"
        }).disableSelection();
      } );   </script>
    <apex:form>
        <ul id="sortable1" class="connectedSortable">
            <h3>Level 1</h3>
        <apex:repeat value="{!Level1Accounts}" var="level1">
        <li>"{!level1.Name}"</li>
        </apex:repeat>
        </ul>

        <ul id="sortable2" class="connectedSortable">  
                <h3>Level 2</h3>
        <apex:repeat value="{!Level2Accounts}" var="level2">
        <li>"{!level2.Name}"</li>  
        </apex:repeat>
        </ul>

        <ul id="sortable3" class="connectedSortable"> 
                <h3>Level 3</h3>
        <apex:repeat value="{!Level3Accounts}" var="level3">
        <li>"{!level3.Name}"</li>    
        </apex:repeat>
        </ul>
         </apex:form>  </apex:page>

My controller:

public class TheController {
    public List<Account> getLevel1Accounts() {
        List<Account> results = [SELECT Name, Id, level__c FROM Account WHERE level__c = 'level 1'];
        return results;
    }
    public List<Account> getLevel2Accounts() {
        List<Account> results = [SELECT Name, Id, level__c FROM Account WHERE level__c = 'level 2'];
        return results;
    }
    public List<Account> getLevel3Accounts() {
        List<Account> results = [SELECT Name, Id, level__c FROM Account WHERE level__c = 'level__c'];
        return results;
    } }
0

You can use visualforce remoting to update accounts to the next level. Modify your script as follows.

$( "#sortable1, #sortable2" ).sortable({
     connectWith: ".connectedSortable",
     stop: function( event, ui ) {
         Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.controller.method}',
            ids, //Pass the ids of record that need to be update
            function(result, event) { 
            //write your code if you need to rerender the changes from results
            }        
         });
     }
}).disableSelection();

Update your controller method to update accounts to next level. Please let me know if anything unclear.

0

Given example utilizes jQuery to catch receive event and stores new account properties in Javascript Array. With help of Ajax toolkit those accounts can be updated:

<apex:page controller="TheControllerj" sidebar="false" showHeader="false">

<script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
</script>
<script src="../../soap/ajax/37.0/connection.js" type="text/javascript"></script>
<script src="../../soap/ajax/37.0/apex.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>   

<script>
    var map = {};
    $( function() {
        $( "#Level_1, #Level_2" ).sortable({
            connectWith: ".connectedSortable",
            receive: function(evt, ui) {
                map[ui.item[0].id] = evt.target.id;
                //console.log(map);
            }
        }).disableSelection();
    } );  

    function Save() {
        var accounts = [];

        for (var key in map){
            var account = new sforce.SObject("Account");
            account.id = key;
            account.Level__c = map[key].replace("_", " ");
            accounts.push(account);
        }

        results = sforce.connection.update(accounts);

        for (var i = 0; i < results.length; i++) {
        if (results[i].getBoolean("success")) {
              console.log("account with id " + results[i].id + " updated");
            } else {
              console.log("failed to update account " + results[i]);
            }
        }
        map = {};
    }

</script>
<apex:form >
    <ul id="Level_1" class="connectedSortable">
        <h3>Level 1</h3>
        <apex:repeat value="{!Level1Accounts}" var="level1">
            <li id="{!level1.id}">{!level1.Name}</li>
        </apex:repeat>
    </ul>

    <ul id="Level_2" class="connectedSortable">  
        <h3>Level 2</h3>
        <apex:repeat value="{!Level2Accounts}" var="level2">
            <li id="{!level2.id}">{!level2.Name}</li>
        </apex:repeat>
    </ul>
    <button type="button" onclick="Save()">Click Me!</button>
</apex:form>  
</apex:page>

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.