List or Library Control Buttons & Icons

Forms SharePoint Online
1

I have been chasing this all day and finally decided to ask.

I have several List or Library (LOL) Controls, each I have working and for the most part styled how I want them. While performing some user testing and final checks, there are some design and function elements that I would like to improve. I welcome any ideas out there.

Goals

  • Reveal (show) the Refresh icon at the right of each control
    • They are gray boxes presently
  • Implement a better way to "Save", "Submit", or "Write" values
    • Currently, I can just click the gray Refresh box to commit the changes to the child LOL and that is very clunky; users will complain
  • Flag/highlight required fields upon file upload
    • I want users to immediately address the required fields before moving away from the control
    • I already use validators that throw an error upon parent form save, but I'd like something more immediate if possible
    • I have backed Power Automate flows that rename the file and there is a timing component

Two LOL Controls (1 Library and 1 List)

LibraryListRefreshGray
LibraryListRefreshGray1484×681 75.3 KB

HighlightRequiredFields

Troubleshooting

I tried to use these CSS blocks but did not work:

.fd-sp-datatable-toolbar-side-commands {
    color: #fff;
    background-color: #64a762;
    border-color: #62a775; 
}


.btn-secondary {
    olor: #fff;
    background-color: #64a762;
    border-color: #62a775;   
}


.k-icon.k-i-refresh {
}

Tried this JavaScript (using my own control values):

fd.spRendered(function() {
    //Address required fields upon file upload
    fd.control('ControlName').$on('change', function(options) {
        if((! fd.control('ControlName').value) {
            fd.control('Field1').required = false;
            fd.control('Field2').required = false;
            fd.control('Field3').required = false;
        } else {
            fd.control('Field1').required = true;
            fd.control('Field2').required = true;
            fd.control('Field3').required = true;
        }
    });
});
2

Hello @shedev,

Why do you need refresh for each row? How should it work? What is the use case?

Could you please describe a use case as I don't understand what you want to implement.

Currently there is no out-of-the-box functionality for that. I'll address the question to developers.

3

Your questions are good - and helpful to me too, as explaining them also is useful to strengthen my own understanding.

When the user uploads a file, there are three fields that I require that add information about the upload content.

If the user does not address the required fields quickly, my Power Automate Flow to rename the upload file fails. It's all about the rename and timing.

As shown in the video snippet, if I DO NOT hit the gray/refresh box, the Media Description field remains in edit and does not complete. Sometimes I can click out of the control to simulate the user moving onto another task on the form - to recreate the scenario where they forget or avoid completing the required fields. The validators I have in place will flag the users ultimately when they attempt to SAVE/SUBMIT the parent form, but by then it's too late and the PA Flow has run and not renamed the file.

4

Here is a snippet of what is confusing for users.

5

No, it is not possible, as uploading files and editing metadata are two separate actions. You can define default values with JS.

I suggest renaming files with PnPjs function. I shared the comments to your code in this post.

The List or Library control in inline editing mode should have the Save and Cancel icons like so:
image

Have you removed them with the code?

6

Yes, I don't want users to edit, delete, or create a new folder in the control. I would like them to see the Refresh button.

7

@shedev,

Have you removed the refresh icon from?

You can add a custom button to the toolbar that will refresh the control with the Save icon instead of teh refresh. See the documentation for the code examples:
Work with buttons on the toolbar of a List or Library

8

I did not intentionally remove the Refresh icon but happened I suspect when I disabled create new folder.

9

I have gone through my entire CSS document. The very last thing I tried fixed the missing Refresh button problem. BUT it created another problem that the CSS had solved for another requrement.

/* This was used to hide the PDF icon
as we don't want users to create a PDF */

i.ms-Icon.ms-Icon {
    display: none;
}

Once that block was commented out, viola!

AhHa_PDF
AhHa_PDF777×289 23.2 KB

QUESTION
How may I hide the PDF ms-icon while showing the others such as Refresh and Upload icons?

10

UPDATE

Office UI Fabric Icon list here: https://uifabricicons.azurewebsites.net

 /* HIDE PDF icon */

 i.ms-Icon.ms-Icon--PDF {
    display: none;
}

 
 /* HIDE Comment icon */
 .ms-Icon.ms-Icon--Comment {
    display: none;
}

I left the "i" in the i.ms-Icon.ms-Icon--PDF line above to show a before/after. Plumsail flags that "i" as being over qualified and can be removed. Like so:

 /* HIDE PDF icon */

 .ms-Icon.ms-Icon--PDF {
    display: none;
}
11

@shedev,

You can remove any button from the toolbar using teh code:

//remove the close button
fd.toolbar.buttons.splice(1,1);

Learn more in the Managing form's toolbar with JS

1 Like