Object-table - How can select all items in the one page

Hi Support team. I’m using the object-table to create a table that has a multi-select like below:

  1. Then I need to select all the items on the same page (not all items on the table), But I can’t find out the solution for this one ( I can select base on the index of each item for selection, but when I do some filter or sort, then my logic will not working fine).
    So do you have any solution or idea for this one? Just “select all” on the current page.

  2. And another question about ‘on-state-change’ attribute of object-table, I want to get the action “change page” of the user, to disable or enable the button, So when the user changes the page, in the JS file, the value is changed, but the UI is updated quite slow (take the 30s - 1m), Do you know why?

XML file:

 <object-table label="" query="jobs_array" loading="$: isLoading" init-state="$:initState()" limit="$: entries" mode="paginate" on-state-change="tableStateChanged($state)" empty-message="Your items will appear here">
        <column-group heading="Jobs">
            <column heading="Well" filter="true">{well_name}: {well_type} [{well_status}]</column>
            <column heading="Job">{job_number}: {job_name}</column>
            <column heading="Type" filter="true">{job_type}</column>
            <column heading="Status" filter="true">{job_status}</column>
            <column heading="Days on Well">{days_on_well}</column>
            <column heading="Spud Date">{spud_date}</column>
            <column heading="Locked By" filter="true">{$:getUserName($object)}</column>
            <column show-if="$: RoleUtil.isAdmin()" filter="true" sort="false" sorting="false" style="$:getRowStyles($object)" fit="shrink">
                <header-action on-press="$:selectAll()" icon="$: checkIcon()"/>
                <edit-boolean value="$object.archived" on-change="$:valueChanged($object, newValue, oldValue)" />
            </column>
        </column-group>
        <action on-press="$: jobOptions($selection)" icon="$: getJobSubscribeIcon($object)" />
        <button-group mode="split">
            <button on-press="$: onSelectEntries(15)" label="$: entries"/>
            <button on-press="$: onSelectEntries(25)" label="25"/>
            <button on-press="$: onSelectEntries(50)" label="50"/>
            <button on-press="$: onSelectEntries(100)" label="100"/>
            <button on-press="$: onSelectEntries(200)" label="200"/>
        </button-group>
    </object-table>

JS file:

var isLoading = false;
var isSelectAll = false;
function selectAll() {   // when click icon select all (action header)
    isSelectAll = !isSelectAll;
    jobSelected = [];
    if(page == 1){
        for( var i = 0; i < (view.jobs_array.length >= entries ? entries : view.jobs_array.length); i++){
        var job = view.jobs_array[i];
        if (isSelectAll) {
            job.archived = true;
            job.save();
            jobSelected.push(job.job_number);
        } else {
            job.archived = false;
            job.save();
        }
        }
    }else{
        for( var i = entries*(page-1); i < (view.jobs_array.length >= entries*page ? entries*page : view.jobs_array.length); i++){
        var job = view.jobs_array[i];
        if (isSelectAll) {
            job.archived = true;
            job.save();
            jobSelected.push(job.job_number);
        } else {
            job.archived = false;
            job.save();
        }
        }
    }
    isJobSelected = jobSelected.length > 0 ? true : false;
}

var page = 1;
function tableStateChanged(state){  // on-state-change
    if(page == state.page){
        saveState = state;
    }
    if(page != state.page && isSelectAll){   // will take 30s - 1m to update UI??
        isLoading = true;
        component.dialog({ id: "confirm" }).show();
        onReset();
    }
    page = state.page;
}

Any solution for this one?

Hi Kien,

This is not currently possible using a header-action, however we’ve added this to our product feedback.

One possible workaround would be to add an action button to your table, something like this:

image

Let me know if this is an acceptable workaround for you and I can share the code for how that button would access the rows currently rendered.

Yah, Can you share your code?, I need to review and if it is possible, I’ll include it in my code. Thanks

@kien.tran2 Something like this is what @kobie is referring to

VIEW XML

<object-table label="Select one to view details" query="tickets" empty-message="Your items will appear here" limit="5">
    <column heading="Date">{date}</column>
    <column filter="true" heading="Customer">{customer}</column>
    <column filter="true" heading="Pad">{pad_name}</column>
    <column style-align="right" heading="Total">{$object.ticket_total}</column>
        
    <button-group>
        <button label="Select all" icon="fa-check" on-press="$:selectAll($filteredData, controls)" validate="false" style="outline" />
    </button-group>
</object-table>

VIEW JS

function selectAll(filteredData, controls) {
    var startIndex = (controls.page - 1) * controls.limit;
    var endIndex = controls.limit * controls.page;
    // slice the current visible page's objects out of the array of all objects currently rendered (sorting and filtering included)
    var selectedObjects = filteredData.rows.slice(startIndex, endIndex);

    // Now you can do what you need to with the selectedObjects
}

In short, the object-table variable $filteredData contains an array of all the DB objects currently rendered in the table across all pages. And so we just need to ‘slice’ out the specific page that we are interested in, the current page in this case, which is stored in controls

2 Likes

Thanks @tielman , It helps me to resolve the first issue!
And how about the second issue? with the on-state-change, Purpose I want to clear all selected from page 1 when I move to page 2, And my tableStateChanged function will take some 30s - 1min to do it. So how can I do this action quickly ? or any solution for doing it?
Thanks

Hi @kien.tran2

Object-table performance is split into 2 broad groups.

  1. Query performance (how long it takes to get the data from the DB)
  2. Rendering performance (how long it takes to render the data in the table)

Since both of these are app and data specific, the solution/optimization will be specific to your app. Without looking at the specific code, but based on the fact that the performance issue is on state-change, I would assume that the problem is with the rendering aspect (but that depends on exactly what you are doing in your functions)

I would look at these articles below to start and then if you need more help with App Optimization then you can reach out to your JourneyApps Customer Success team as this is a service that they can provide

  1. Best Practices
  2. Improving App Performance