Learning To Use Lists or Library Control | One Example

Forms SharePoint Online
1

Coming off of a big update from Forms Designer (from V2 to V3) and upgrading my SPO App Package, I decided that since I am overhauling all of my forms anyway, why not check out other controls and containers that I haven't used in the past.

We use Accordions very heavily but when reimagining a very long form, I took a look at Tabs. Very early in my exploration yet but wanted to share that the length of our forms get very long and tabs seem to offer another way to expose a lot of SPO fields but tuck them nicely within Tabs v Accordions.

While experimenting with Tabs, I also wanted to try a List or Library control for a problem that was raised by one user group.

PROBLEM
The problem is related to a SPO Multiline Text field, with Appended changes. We have a robust population who frequently make comments on the items they are working on together. Staff would like to moderate those entries when posts may be inappropriate or otherwise not helpful. There is no way (that I am aware) to edit or delete appended entries to those types of SPO column types.

TODAY WE USE THIS
DiscussionMultilineAppend

From this problem, we are looking at a new method where comments are sent to an external (child) list and then shown on the parent list. Staff then may access the child list and edit/delete items as desired.

WE ARE EXPLORING THIS

ListLibraryControl
ListLibraryControl769×368 34 KB

THE CODE THAT WORKS
We set the default value for CommentDate to fill in the current date and time. I need to get that formatted correctly based on time zone as it always enters a future time! I have also created a text field to store the current user to use when a new child entry is made. That all seems to work well.

fd.spRendered(function() {
	/*Setting the 'WriterTxt' value to be used later to populate the 'Commentor' field in
	the external list when creating a new record via a List or Library control*/
	var currentUserName = _spPageContextInfo.userDisplayName;
    	fd.field('WriterTxt').value = currentUserName;
    });
    
/*
Grabbed snippets from here:
https://community.plumsail.com/t/populate-fileds-from-parrent-form-in-child-dialog-list-and-library-control/9938/14
*/

fd.spRendered(function() {
    //prepopulating fields of a new List or Library record with the values from the parent form
    fd.control('Comments').$on('edit', function(editData) {
        //var currentUserName = _spPageContextInfo.userDisplayName; is used in a previous block to set the value of 'WriterTxt' to be available for use here
        //Check that this is a new record
        if (editData.formType === 'New') {
            //Prepopulating AssignedTo field
            editData.field('Commentor').ready(function() {
                editData.field('Commentor').value = fd.field('WriterTxt').value;
            });
        }
    });
});

WHAT WE HAVEN'T FIGURED OUT YET

Found this reference to PnP JS Library for Lists with the end goal of getting the SharePoint item by ID.

GOAL: Filter the child list entries that are specific to the item in which they are being created. Hundreds of users may send comments to the child list from hundreds of items; we need to make sure only comments made about 'x-item' are displayed.

// Reserve list item Id for idempotent list item creation

const listItemId = await list.reserveListItemId();

// log id to console
console.log(listItemId);



//Add a list item using path (folder), validation and set field values
import { spfi } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";

const sp = spfi(...);

const list = await sp.webs.lists.getByTitle("MyList").select("Title", "ParentWebUrl")();
const formValues: IListItemFormUpdateValue[] = [
                {
                    FieldName: "Title",
                    FieldValue: title,
                },
            ];

list.addValidateUpdateItemUsingPath(formValues,`${list.ParentWebUrl}/Lists/${list.Title}/MyFolder`)
1 Like