Layout options for custom multipleObjectPicker

Valerie_Siroux

Hi

I created a custom multipleObjectPicker on the change form.
But the layout is a mess.
On the screenshot below - the multipleObjectPicker is in the green box.
It doesn't have a title or so.

Is their a way to give it a title in the same layout style as "Affected Configuration Items"?
Because now, there is only a button and an empty grid. People won't use this because they don't know the meaning of this button.

Geoff_Ross

Hi Valerie,

You need to take the object out of the columnFieldList and add it into its own object in a customFieldGroupList.
Then the name will show.
You can place it anywhere on the form, including General Tab.

Here's an example of the whole General Tab with a custom object picker for Business Services so you can see the whole layout.

/*********/
/** TAB **/
/*********/
{
	name: "General",
	content: [
		{
			customFieldGroupList: [
				{
					name: "ServiceRequestInformation",
					rows: [
						{
							columnFieldList: [
								{ DataType: "UserPicker", PropertyDisplayName: "AffectedUser", PropertyName: "RequestedWorkItem" },
								{ DataType: "String", PropertyDisplayName: "Alternatecontactmethod", PropertyName: "ContactMethod", ColSpan: 2, MinLength: 0, MaxLength: 256 }
							],
						},
						{
							columnFieldList: [
								{ DataType: "String", PropertyDisplayName: "Title", PropertyName: "Title", Required: true, MinLength: 0, MaxLength: 200 }
							],
						},
						{
							columnFieldList: [
								{ DataType: "LongString", PropertyDisplayName: "Description", PropertyName: "Description", Required: true, MinLength: 0, MaxLength: 4000}
							],
						},
						{
							columnFieldList: [
								{ DataType: "Enum", PropertyDisplayName: "Urgency", PropertyName: "Urgency", Required: true, EnumId: 'eb35f771-8b0a-41aa-18fb-0432dfd957c4' },
								{ DataType: "Enum", PropertyDisplayName: "Priority", PropertyName: "Priority", Required: true, EnumId: 'd55e65ea-fae9-f7db-0937-843bfb1367c0' },
								{ DataType: "Enum", PropertyDisplayName: "Source", PropertyName: "Source", Required: true, EnumId: '848211a2-393a-6ec5-9c97-8e1e0cfebba2' },
							]
						},
						{
							columnFieldList: [
								{ DataType: "Enum", PropertyDisplayName: "Area", PropertyName: "Area", EnumId: "3880594c-dc54-9307-93e4-45a18bb0e9e1"},
								{ DataType: "Enum", PropertyDisplayName: "SupportGroup", PropertyName: "SupportGroup", EnumId: "23c243f6-9365-d46f-dff2-03826e24d228" },
								{ DataType: "UserPicker", PropertyDisplayName: "AssignedTo", PropertyName: "AssignedWorkItem" },
							],
						},
					]
				},
				{
					name: "Affected Business Services",
					type: "multipleObjectPicker",
					PropertyName: "HasRelatedWorkItems",
					ClassId: "b2a806a6-87f6-0bc9-da74-c27e9ab5a5d7",
					PropertyToDisplay: {DisplayName:"Name",OwnedByOrganization:"Business Process"},
					Scoped: true
				},  
				{
					name: "UserInput",
					type: "userInput"
				},
				{
					name: "ActionLog",
					type: "actionLog"
				}
			]
		}
	]
},

Geoff

Geoff_Ross

I'm not sure on number 1. Is this a custom class???
As for number 2, that is because in JavaScript the Enums are represented as objects, so you need to specify which property of the object you want to display. In this case it will be Name so you need to replace your Property to Display line as follows.

PropertyToDisplay: {DisplayName:"Name","SLA.Name":"SLA", "AssetStatus.Name":"Asset Status"},

Geoff

seth_coussens

Not knowing what your code looks like or how you integrated it into the form it's difficult to say, but you could use the form editor to create a new field group like this...

{
    "Default":{
    tabList: [
        /*********/
        /** TAB **/
        /*********/
        {
            name: "General",
            content: [
                {
                    customFieldGroupList: [
                        {
                            name: "IncidentInformation",
                            rows: [                                
                                {
                                    columnFieldList: [
                                        { DataType: "UserPicker", PropertyDisplayName: "AffectedUser", PropertyName: "RequestedWorkItem" },
                                        { DataType: "String", PropertyDisplayName: "Alternatecontactmethod", PropertyName: "ContactMethod", ColSpan: 2, MinLength: 0, MaxLength: 256 }
                                    ],
                                }

This would then provide a section header where you could place the custom picker.

Valerie_Siroux

I used this code to add a multipleObjectPicker to the General tab.

{

                                            columnFieldList: [

{

name: "Related Support Catalog",

DisplayName: "Related Support Catalog",

type: "multipleObjectPicker",

PropertyName: "RelatesToConfigItem",

ClassId: "310dc9e7-3da4-50db-b6fd-9247af499b1c",

PropertyToDisplay: {DisplayName:"Name"},

}  

                                            ]

                                        }

I think I need something like the name property on the customFieldGroupList for the columnFieldList. I tried several options but none of them seems to work.
I would like to add this to the General tab, but using your code, it only works I if place it on another tab.

Is it possible to add this to the general tab?

Geoff_Ross

Hi Valerie,

You need to take the object out of the columnFieldList and add it into its own object in a customFieldGroupList.
Then the name will show.
You can place it anywhere on the form, including General Tab.

Here's an example of the whole General Tab with a custom object picker for Business Services so you can see the whole layout.

/*********/
/** TAB **/
/*********/
{
	name: "General",
	content: [
		{
			customFieldGroupList: [
				{
					name: "ServiceRequestInformation",
					rows: [
						{
							columnFieldList: [
								{ DataType: "UserPicker", PropertyDisplayName: "AffectedUser", PropertyName: "RequestedWorkItem" },
								{ DataType: "String", PropertyDisplayName: "Alternatecontactmethod", PropertyName: "ContactMethod", ColSpan: 2, MinLength: 0, MaxLength: 256 }
							],
						},
						{
							columnFieldList: [
								{ DataType: "String", PropertyDisplayName: "Title", PropertyName: "Title", Required: true, MinLength: 0, MaxLength: 200 }
							],
						},
						{
							columnFieldList: [
								{ DataType: "LongString", PropertyDisplayName: "Description", PropertyName: "Description", Required: true, MinLength: 0, MaxLength: 4000}
							],
						},
						{
							columnFieldList: [
								{ DataType: "Enum", PropertyDisplayName: "Urgency", PropertyName: "Urgency", Required: true, EnumId: 'eb35f771-8b0a-41aa-18fb-0432dfd957c4' },
								{ DataType: "Enum", PropertyDisplayName: "Priority", PropertyName: "Priority", Required: true, EnumId: 'd55e65ea-fae9-f7db-0937-843bfb1367c0' },
								{ DataType: "Enum", PropertyDisplayName: "Source", PropertyName: "Source", Required: true, EnumId: '848211a2-393a-6ec5-9c97-8e1e0cfebba2' },
							]
						},
						{
							columnFieldList: [
								{ DataType: "Enum", PropertyDisplayName: "Area", PropertyName: "Area", EnumId: "3880594c-dc54-9307-93e4-45a18bb0e9e1"},
								{ DataType: "Enum", PropertyDisplayName: "SupportGroup", PropertyName: "SupportGroup", EnumId: "23c243f6-9365-d46f-dff2-03826e24d228" },
								{ DataType: "UserPicker", PropertyDisplayName: "AssignedTo", PropertyName: "AssignedWorkItem" },
							],
						},
					]
				},
				{
					name: "Affected Business Services",
					type: "multipleObjectPicker",
					PropertyName: "HasRelatedWorkItems",
					ClassId: "b2a806a6-87f6-0bc9-da74-c27e9ab5a5d7",
					PropertyToDisplay: {DisplayName:"Name",OwnedByOrganization:"Business Process"},
					Scoped: true
				},  
				{
					name: "UserInput",
					type: "userInput"
				},
				{
					name: "ActionLog",
					type: "actionLog"
				}
			]
		}
	]
},

Geoff

Valerie_Siroux

Thanks Geoff!

It's looking better now  

Only a few issues left  - I had to add the column Asset Status to the PropertyToDisplay list.
Not able to add items without this property.
Error when trying to add: Uncaught ReferenceError: AssetStatus is not defined

When including this in the PropertyToDisplay list:  PropertyToDisplay: {DisplayName:"Name",SLA:"SLA", AssetStatus:"Asset Status"},
I can it into the grid.
But when applying the CR, the Asset Status and SLA (both are enum), changes to [object Object]
Before applying the CR I can see the values correctly

Geoff_Ross

I'm not sure on number 1. Is this a custom class???
As for number 2, that is because in JavaScript the Enums are represented as objects, so you need to specify which property of the object you want to display. In this case it will be Name so you need to replace your Property to Display line as follows.

PropertyToDisplay: {DisplayName:"Name","SLA.Name":"SLA", "AssetStatus.Name":"Asset Status"},

Geoff

Valerie_Siroux

Thanks - It's working correctly now !