Lazy Loading Plumsail List or Library Controls

Hello, all.

I have two Plumsail List or Library controls in an Edit form, one targets a SharePoint List (user comments), and the other a SharePoint Document Library (user uploads).

Goals:

  1. More responsive and not lazy (should not take extra clicks to “wake up” fields in the control), this is particularly painful when required fields are involved
  2. More modern, stylized look and feel - it feels old and looks legacy
  3. Make the row depth in the control a different height (taller)

What have others done to make you Plumsail List or Library controls really shine?

Hello @shedev,

Could you please expand on these points?

  1. What do you mean by 'extra clicks to wake up the field'? A short video or a more detailed description would be very helpful.
  2. How would you like the control to look? Do you have any specific examples?
  3. Are you referring to the row height? If so, this can be easily adjusted using CSS.

Hello, @Margo

I think I too was “lazy loading” that post, wasn’t I? :smile: I was so tired and just wanted to put a question out in the universe but didn’t really offer anything valuable. Thank you so much for asking.

Let see…

Table titles are renamed to provide the user a more readable experience.

fd.spRendered(function () {
  fd.control('MediaUpload').ready().then(function (dt) {
    const grid = dt.widget;
    if (!grid || !Array.isArray(grid.columns)) return;

    const titles = {
      //Table:            'Is this a Table?',
      MediaUploadType:  'Choose Stem or Options',
      MediaFileType:    'Media File Type',
      BodySite:         'Body Site',
      MediaDescription: 'Media Description'
    };

    // Create a new columns array with updated titles where keys match
    const newCols = grid.columns.map(col => {
      const key = col.field || col.dataField || col.title;
      if (key && titles[key]) {
        return Object.assign({}, col, { title: titles[key] });
      }
      return col;
    });

    grid.setOptions({ columns: newCols }); // Kendo will redraw headers
  });
});

The four required fields are of the following types (from left ot right): Choice, Choice, Choice, Multiline plaintext and have a validator checking for their values on save - the fields are not required at the SharePoint column level, instead the validator sets the requirement.

fd.validators.push({
  name: 'MediaValidator',
  error: 'MISSING REQUIRED FIELDS: Go to the Media Uploads tab to address.',
  validate: function () {
    return pnp.sp.web.lists.getByTitle('Media')
      .items
      .filter(`parentListItem eq ${fd.itemId}`)
      .select('Id,MediaUploadType,MediaFileType,BodySite,MediaDescription')
      .get()
      .then(items => {
        if (!items || items.length === 0) return true; // nothing to validate if nothing uploaded
        return items.every(it =>
          it.MediaUploadType && it.MediaFileType && it.BodySite && it.MediaDescription

        );
      });
  }
});

The three buttons at the top of the form travel with the user as they scroll up/down the screen, then stow away after 2 seconds of mouse/keyboard inactivity to give the user more viewable area to review their work. I mention this because you may want to know about other things happening in the form that may impact the loading of other features.

When first uploading a file, the user sees red outlines around the four required fields to draw their eye to the areas that need attention.

The red outline is set in the DL itself using JSON to format the columns - this is the [MediaUploadType] column formatting.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px",
    "overflow": "hidden",
    "text-overflow": "ellipsis",
    "border": "red",
    "border-style": "solid",
    "border-width": ".5px"
  },
  "attributes": {
    "class": "sp-css-backgroundColor-white sp-field-fontSizeMedium sp-css-color-black"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "[$MediaUploadType]",
      "attributes": {
        "class": "sp-field-fontSizeMedium sp-css-color-black"
      }
    }
  ]
}

In this next view, I have completed a few required fields and am working my way through another.

After a file uploads, the first required field the user attempts (any one of the three Choice fields or the Multiline text field), the user is presented with a spinner and must (on average) click three times before they can select the first value value or enter text in the multiline field. Once the table “wakes up” and the first required field allows a selection or input, the remaining fields usually behave as desired - but not always as is illustrated below.

This happens on every form, with each upload event, multiple browsers (Chrome, Edge, Opera, Firefox), and is definitely not ideal - yet it eventually works. So it not nonfunctional but it would be nice to have the table “warm up” before the user starts interacting with it.

The second issue about row depth may truly be a vague thought I had that if I increased the depth, the required fields would be easier to click. But in truth, the problem isn’t that the fields are “hard to click” - it’s more that they are sleeping :sleeping_face: . So while knowing the CSS for the row depth is a “nice to know”, it’s not critical.

The other Plumsail List or Library control targets a List and is where users post comments and have discussions with others who may review the form contents.

The required field has a validator like the Media Upload example above, but no JSON is applied in the backend list - so no red outline border.

Here is where my modern styling comment “more modern, stylized look and feel - it feels old and looks legacy” come into play.

I was testing a drop-in HTML option and liked how it looked but it was a nightmare to configure so I abandoned it but this was the early look & feel that I really liked. It’s a Microsoft-like layout and the stakeholders would ideally like to be able to “like” and “reply to” comments much like Teams, etc. If CSS and JS could morph a List or Library control into something like that, that would be fantastic but I haven’t found any in the community posts yet but I have missed some!

@shedev,

I assume, it takes time for a options to load. Do you see a loading spinner even when there is no custom code related to this control? Also, how many options are in the dropdowns?

If this behavior occurs without any custom code—and there aren't many options in the dropdown—a short video along with an export of your Network and Console logs would be very helpful. Please email this data to us at support@plumsail.com.

Regarding comments: you can customize the look of the control with CSS, but in my opinion, it isn't the best way to collect comments. Please take a look at the alternative approach described here:

As always, @Margo - thank you for your guidance and suggestions. We have tried the appended multiline text field before but we always struggle then to have a nice, readable column in the SP List view to show all iterative comments. Stakeholders use the comments later for each item in a review process; they need to export the SP list as a CSV with (readable) comments.

I will review this path again. Thank you so much.

@Margo ,

I spent the day working on the multiline text angle, focusing on building a Power Automate Flow to handle the appended history to make it more accessible to stakeholders.

After several hours of testing, Power Automate started throttling and I see there may be some SharePoint service issues impacting HTTP API calls, but I have most of the wiring working and a readable column to log all posts.

1 Like