function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SaintMichaelSaintMichael 

Using listView component

I have an equipment inventory app.

I'd like to use a select list to change the 'Category':

 

 $("#categories").on("change", function(){
                alert(this.value);
                InventoryExtension.getEquipment(this.value,handleUpdate );
               //$("#equipmentList").listview('refresh');
               $("#equipmentList").trigger('create');
                
});

 The Apex method is getting called, the parameter 'this.value' from the click shows in the Apex method as well.

It comes in as 'Laptop' or 'desktop', fine.

 

Here is the Apex method:

 public static List<Equipment__c> getEquipment(String myCategory){
             
             
                if(myCategory== null){
                    products = [SELECT Id, Model__c,checked_out__c,Operating_System__c,Serial_Number__c,
                    Asset_Tag__c,Hostname__c,Notes__c,Memory_Size__c  from Equipment__c];   
                }else{
                	System.debug('My Category: '+myCategory);
                 	products = [SELECT Id, Model__c,checked_out__c,Operating_System__c,Serial_Number__c,
                    Asset_Tag__c,Hostname__c,Notes__c,Memory_Size__c  from Equipment__c 
                                    where RecordType.Name =: myCategory];      
                }
                
                return products;
               
            }

 

 

I can see that the data is coming back from the post correctly. If I choose 'Laptop' I am getting laptop data.

 

I don't understand how to update the view of the listview??

Can someone shed some light on this?

 

 Here is the server plain text response:

Response from server: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

 

 

Best Answer chosen by Admin (Salesforce Developers) 
Pat PattersonPat Patterson

Hi SaintMichael,

 

Let me see if I understand what you're trying to do... You have a category switcher, and, when you change category, you want to retrieve equipment for that category, and display the list in a list view.

 

It looks like you've got the first half of this working - you have the category switcher, and you are getting a list back.

 

What you need to do is loop through the equipment in your list, appending list items to your list view, and, once you're done, call $("#mylist").listview("refresh"); to tell jQuery Mobile to do its UI stuff. Assuming you have something like <ul id="equipmentlist"> on your page, you would have some code like this in handleUpdate:

 

function handleUpdate(result, event) {
    $.each(result, function(index, value){
        $('#equipmentlist').append('<li>'+
          '<a href="#equipment'+value.Id+'">'+
            value.Serial_Number__c+
          '</a>'+
        '</li>');
    });
    $("#equipmentlist").listview("refresh");
}

 

You should also remove the JSON.serialize from getEquipment and let it return the products array. If you want to see the data on the client side, use JSON.stringify(results);

 

 

Hopefully this moves you a bit closer to what you're trying to do!

 

Cheers,


Pat

All Answers

SaintMichaelSaintMichael

I seem to be making progress with using JSON on the data&colon;

 

Here is my new getEquipment Method:

 

@RemoteAction
            public static String getEquipment(String myCategory){
             
             
                if(myCategory== null){
                    products = [SELECT Id, Model__c,checked_out__c,Operating_System__c,Serial_Number__c,
                    Asset_Tag__c,Hostname__c,Notes__c,Memory_Size__c  from Equipment__c];   
                }else{
                	System.debug('My Category: '+myCategory);
                 	products = [SELECT Id, Model__c,checked_out__c,Operating_System__c,Serial_Number__c,
                    Asset_Tag__c,Hostname__c,Notes__c,Memory_Size__c  from Equipment__c 
                                    where RecordType.Name =: myCategory];      
                }
                
                return JSON.serialize(products);
               
            }

 

Here is what I get on my console in the post response:

[{"statusCode":200,"type":"rpc","tid":2,"ref":false,"action":"InventoryExtension","method":"getEquipment","result":"[{\"attributes\":{\"type\":\"Equipment__c\",\"url\":\"/services/data/v29.0/sobjects/Equipment__c/a1Sf00000001m5zEAA\"},\"RecordTypeId\":\"01240000000DtFeAAK\",\"Serial_Number__c\":\"5G0NTG1\",\"Operating_System__c\":\"Windows 77\",\"Notes__c\":\"Notes\",\"Memory_Size__c\":\"4GB\",\"Model__c\":\"Optiplex 755\",\"Hostname__c\":\"conference01\",\"Id\":\"a1Sf00000001m5zEAA\",\"Asset_Tag__c\":\"1030\",\"checked_out__c\":false

 
Pat PattersonPat Patterson

Hi SaintMichael,

 

Let me see if I understand what you're trying to do... You have a category switcher, and, when you change category, you want to retrieve equipment for that category, and display the list in a list view.

 

It looks like you've got the first half of this working - you have the category switcher, and you are getting a list back.

 

What you need to do is loop through the equipment in your list, appending list items to your list view, and, once you're done, call $("#mylist").listview("refresh"); to tell jQuery Mobile to do its UI stuff. Assuming you have something like <ul id="equipmentlist"> on your page, you would have some code like this in handleUpdate:

 

function handleUpdate(result, event) {
    $.each(result, function(index, value){
        $('#equipmentlist').append('<li>'+
          '<a href="#equipment'+value.Id+'">'+
            value.Serial_Number__c+
          '</a>'+
        '</li>');
    });
    $("#equipmentlist").listview("refresh");
}

 

You should also remove the JSON.serialize from getEquipment and let it return the products array. If you want to see the data on the client side, use JSON.stringify(results);

 

 

Hopefully this moves you a bit closer to what you're trying to do!

 

Cheers,


Pat

This was selected as the best answer
SaintMichaelSaintMichael

Pat,

 

Thanks!

 

I had a feeling I was supposed to do this, re-construct the list.

 

I was hoping I could some how get them back into the scope of the visualforce code,

so it would massage the data for me.

 

Anyway, thank you!

 

Again, really enjoyed the Elevate Workshop a few weeks ago!
Same guy from twitter!
Pat PattersonPat Patterson

Yeah - the way this stuff works, once your initial page is rendered, everything is pretty much in JavaScript.

 

If you don't have much data, and it's pretty static, you can render it all up front, and switch between pages, just like the sample app does for the merchandise list/detail.

 

Glad you enjoyed the workshop - thanks for attending!

 

Yeah - I made the connection with your Twitter persona :-)

 

Cheers,

 

Pat
SaintMichaelSaintMichael

Pat,

 

is there any way to manipulate the data before shows on the initial load?

 

I'd like to use my checked_out__c field value for a conditional showing of an image, a green check mark for 'checked out' and a red X for 'Not Checked Out'.

 

I guess I would have to delay the initial load, or just reload the data in the format I want?

 
Pat PattersonPat Patterson

On the initial load, you can use Visualforce, so you can do things like

 

<style>
.checkedlink {
    # CSS to show check at left of link
}
.uncheckedlink {
    # CSS to show red X at left of link
}
</style>

...

<!-- Later, looping through records... -->
<a class='{!IF(record.checked_out__c, "checkedlink", "uncheckedlink"}'>{!record.Serial_Number__c}</a>

 and use CSS in the usual way, so the page will render just as you want it.