Customizing forms - rows / columns layout

Gabriel_Lences

Ok guys hear me out and please tell me some good news that this is possible somehow. I'd like to customize our WI form so that we could have several other fields next to the description field in rows. E.g. Created by, Affected user, Support Group , Assigned to. Providing a glorious MS paint example of what I mean. Please tell me that this is possible, I've been trying to get my head around this for an hour with no luck already 😅😔

Mikkel_Madsen

You can move the objects around as you like with jQuery (I'm not a programmer but it seems to work)

In this case I have put the "Created By User" field after the Description Field in the Incident.js and uses that as target when moving other formgroups.

columnFieldList: [
                                        { DataType: "LongString", PropertyDisplayName: "Description", PropertyName: "Description", MinLength: 0, MaxLength: 4000 },
										{ DataType: "UserPicker", PropertyDisplayName: "CreatedByUser", PropertyName: "CreatedWorkItem", ExtraProps: "Title,Office", Disabled: true }
                                    ],

And then in custom.js

app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {
    formObj.boundReady(function () {
		//Get Parent node of Created by user field form group
		var createdByUserDiv = $('div[data-cid-propname="CreatedWorkItem"]').parent();
		//Move Classification node
		createdByUserDiv.append($('label[for="Classification"]').parent());
		//Move Source Node
		createdByUserDiv.append($('label[for="Source"]').parent());
	});
});

Gabriel_Lences

@Geoff_Ross i found this thread and your post over here , https://community.cireson.com/discussion/4696/restructuring-the-layout-of-wi-forms , but I didn't exactly get the instructions you pointed out there. Could you please paste the code from the .js for how this would look in my case? Thanks.

Mikkel_Madsen

@Gabriel_Lences I will like to tell you good news - IT IS POSSIBLE 😁

Gabriel_Lences

@Mikkel_Madsen looks good, mind sharing the code i need to put into the wi .js in order for this to work? :) Awesome work though! 😊

Mikkel_Madsen

You can move the objects around as you like with jQuery (I'm not a programmer but it seems to work)

In this case I have put the "Created By User" field after the Description Field in the Incident.js and uses that as target when moving other formgroups.

columnFieldList: [
                                        { DataType: "LongString", PropertyDisplayName: "Description", PropertyName: "Description", MinLength: 0, MaxLength: 4000 },
										{ DataType: "UserPicker", PropertyDisplayName: "CreatedByUser", PropertyName: "CreatedWorkItem", ExtraProps: "Title,Office", Disabled: true }
                                    ],

And then in custom.js

app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {
    formObj.boundReady(function () {
		//Get Parent node of Created by user field form group
		var createdByUserDiv = $('div[data-cid-propname="CreatedWorkItem"]').parent();
		//Move Classification node
		createdByUserDiv.append($('label[for="Classification"]').parent());
		//Move Source Node
		createdByUserDiv.append($('label[for="Source"]').parent());
	});
});

Gabriel_Lences

Thanks for the info @Mikkel_Madsen I'll try to play around with this when I'll have some spare time.