List or library control: how to access data (not only selected items)?

Hi everyone,

I have a list/library control on my form (SP2019)
Is it possible to get the data from this control to use it elsewhere?
The only thing I can find is

fd.control('mySPDataTable').selectedItems

which contains an array of selected items.

However, I want to grab the whole datatable (preferable in json) and do some actions with it.

Is this possible?

kind regards,
Bart Plessers

ok, found it

fd.control('mySPDataTable').widget._data

But now I'm dealing with following problem.....

If I get my data from pnp (1)

const items1 = await pnp.sp.web.lists.getByTitle(myListTitle).items.getAll();

If I get my data from the datatable (2)

const items2 = fd.control('mySPDataTable').widget._data;

both seems to give me an array,

However, the first seems to be an array of JSON objects, the second an array of arrays.
Is it possible to convert the structure of (2) in to the same as (1)?

How?

grtz
Bart Plessers

Dear @bartplessers,
I would recommend sticking to pnpjs requests in case you want to get all the items. Due to how the List or Library control is setup, you'll only get one page of items, not all of available items.

You can still apply the same filters on pnpjs requests to get only some items.

Hi @Nikita_Kurguzov ,

I wasn't aware of this, so indeed, this is not an option anymore.

I've been asking a lot of questions lately...

so maybe I should draw the bigger picture...

I want to create a PlumSail form, where some data are displayed in a datatable and also visually displayed on a graph.
Now I want the user to interact with the datatable:

  • filter on column (preferable with a drop-down on column header)
  • sort on column (preferable with a sort button on column header)
  • select items
  • add items
  • delete items

and that those operations refresh the graph.

So the main idea was

  • loading the data once into a datatable
  • intercept above actions and refresh the graph accordingly without the need of reloading the data from source every time

To give you an impression:

  1. (manual) filter control
  2. datatable is filtered accordingly (no new load of data by pnpjs, just filter the datatable)
  3. updated graph
  4. (work in progress) filter/sort on column headers

And indeed, right now, the filter (1) both triggers a filter on the datatable and an update of the graph.
But I want to make this more general and capture any modification of the datatable (filter/sort/...) and trigger the update graph without the need to explicitly add the update graph function to every action.

However, if I only can address the data in the datatable on the current page, this would not work.

What do you suggest in this use case?
Reload the data with pnpjs every time the user takes an action (sort/filter)? This causes some network traffic and is not needed in my opinion.
However, if there is no other option, this will be it.

kind regards,

Bart Plessers

Dear @bartplessers,
Using pnpjs to load data shouldn't take too much traffic, so it really is the best option. The requests can match the filters you apply to the List or Library control, and retrieve items in a similar way with pnpjs.

1 Like

Ok, top!

Thanx for advice!