Cannot make sp-editable-field work (scoped app)

[Ana41]

Hi all, and thanks in advance for any help you might be able to give.

I am currently working on a scoped application and I need to display an editable table in the portal. I have successfully cloned the Data Table widget and it works fine for displaying just a list of records, no editing possible. However, we have a new requirement and now I need to make the list fields editable by the users, similar to what they can do on the backend.

I have come across the usage of sp-editable-field and thought this was exactly what I needed, however after 2 days of work I am not being able to make it work. I even tried commenting out all of my HTML and just left this basic example, which I copied from the OOT User Profile widget:

 <div class="col-xs-12 col-sm-8 user-details">
            <h2>{{data.name}}</h2>
            <p><strong>${Company}</strong><sp-editable-field editable-by-user="data.canEditField" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.company"></sp-editable-field></p>
            <p><strong>${Title}</strong><sp-editable-field editable-by-user="data.canEditField" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.title"></sp-editable-field></p>
            <p><strong>${Department}</strong><sp-editable-field editable-by-user="data.canEditField" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.department"></sp-editable-field></p>
            <p><strong>${Location}</strong><sp-editable-field editable-by-user="data.canEditField" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.location"></sp-editable-field></p>
     </div>

And of course, the respective server side code, also copied from the User Profile widget:

data.sysUserID = gs.getUser().getID();
	data.canEditField = true;
	var sysUserGR = new GlideRecord("sys_user");
	sysUserGR.get(data.sysUserID);
	data.name = sysUserGR.getValue("name");
	var loggedInSysUserID = gs.getUser().getID();
	var sysUserForm = $sp.getForm('sys_user', data.sysUserID);
	data.sysUserView = sysUserForm._view;
	data.sysUserModel = sysUserForm._fields;
	data.sysUserModelList = [];
	for (var i = 0; i < data.sysUserView.length; i++) {
		data.sysUserModelList.push(data.sysUserModel[data.sysUserView[i].name]);
	}

Still, it does not work. I keep getting the same error in the console and no fields are displayed - "Cannot read properties of undefined (reading 'attributes')". Which is weird, because my logs clearly show that my fields' objects exist and have an "attributes" property:

"company":{
"sys_mandatory":false,
"visible":true,
"table_attributes":{},
"dbType":12,
"label":"Company",
"sys_readonly":false,
"type":"reference",
"mandatory":false,
"refTable":"core_company",
"reference_type":"table",
"displayValue":"A1",
"readonly":false,
"hint":"",
"name":"company",
"attributes":{
"encode_utf8":"false",
"edge_encryption_enabled":"true"
},
"reference_key":"sys_id",
"readonlyClickthrough":false,
"reference_qual":"u_client=true",
"choice":0,
"value":"49afebf54ff4f2408c2d2eff0310c7fe",
"max_length":32,
"ed":{}
},

At this point I am getting a bit desperate and am wondering if usage of sp-editable-field maybe only works for the Global scope? I am not able to find any documentation on this and I have gone through all the Community posts about the subject, without being able to find an answer. Thanks and happy holidays!