Layout of incident.js

Peter_Nordqvist

Hi

How can i change the layout on o customized incident.js
I have added the affected users phone,mobile and company to the form, but how can i place the fields where i want them?

This is how it look now:


But i want it to look like this:


The Incident.js part with this:

<div>"Default":{</div><div>&nbsp; &nbsp; tabList: [</div><div>&nbsp; &nbsp; &nbsp; &nbsp; /*********/</div><div>&nbsp; &nbsp; &nbsp; &nbsp; /** TAB **/</div><div>&nbsp; &nbsp; &nbsp; &nbsp; /*********/</div><div>&nbsp; &nbsp; &nbsp; &nbsp; {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "General",</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: [</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; customFieldGroupList: [</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "IncidentInformation",</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columnFieldList: [</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { DataType: "UserPicker", PropertyDisplayName: "AffectedUser", PropertyName: "RequestedWorkItem" },</div><div> </div><div> { DataType: "UserPicker", PropertyDisplayName: "Anmäld av", PropertyName: "ReportedBy", FilterByAnalyst: false&nbsp; },</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { DataType: "String", PropertyDisplayName: "Alternatecontactmethod", PropertyName: "ContactMethod", ColSpan: 2, MinLength: 0, MaxLength: 256 }</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</div><div> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columnFieldList: [</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { DataType: "Display", PropertyDisplayName: "Business Phone:", PropertyName: "RequestedWorkItem.BusinessPhone" },</div><div> { DataType: "Display", PropertyDisplayName: "Mobile:", PropertyName: "RequestedWorkItem.Mobile" },</div><div> { DataType: "Display", PropertyDisplayName: "Company:", PropertyName: "RequestedWorkItem.Company" }</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</div><br><br>

Brian_Wiest

Break out your three rows into three columnFieldList elements

columnFieldList: [

    { DataType: "Display", PropertyDisplayName: "Business Phone:", PropertyName: "RequestedWorkItem.BusinessPhone" },

], 

    columnFieldList: [

        { DataType: "Display", PropertyDisplayName: "Mobile:", PropertyName: "RequestedWorkItem.Mobile" },

], 

    columnFieldList: [

        { DataType: "Display", PropertyDisplayName: "Company:", PropertyName: "RequestedWorkItem.Company" }

], 

Peter_Nordqvist

Hi @Brian_Wiest
Tested, but i only get Company shown..

name: "IncidentInformation",

                            rows: [                                

                                {

                                    columnFieldList: [

                                        { DataType: "UserPicker", PropertyDisplayName: "AffectedUser", PropertyName: "RequestedWorkItem" },

{ DataType: "UserPicker", PropertyDisplayName: "Anmäld av", PropertyName: "ReportedBy", FilterByAnalyst: false  },

                                        { DataType: "String", PropertyDisplayName: "Alternatecontactmethod", PropertyName: "ContactMethod", ColSpan: 2, MinLength: 0, MaxLength: 256 }

                                    ],

                                },

{

                                    columnFieldList: [

{ DataType: "Display", PropertyDisplayName: "Business Phone:", PropertyName: "RequestedWorkItem.BusinessPhone" },

], 

columnFieldList: [

{ DataType: "Display", PropertyDisplayName: "Mobile:", PropertyName: "RequestedWorkItem.Mobile" },

], 

columnFieldList: [

{ DataType: "Display", PropertyDisplayName: "Company:", PropertyName: "RequestedWorkItem.Company" }

], 

                                },

                                {

                                    columnFieldList: [

                                        { DataType: "String", PropertyDisplayName: "Title", PropertyName: "Title", Required: true, MinLength: 0, MaxLength: 200 }

                                    ],

                                },

Brian_Wiest

Missed on my example the {} for columnFieldList breaks

{

    columnFieldList: [

        { DataType: "Display", PropertyDisplayName: "Business Phone:", PropertyName: "RequestedWorkItem.BusinessPhone" },

    ],

},

{

    columnFieldList: [

        { DataType: "Display", PropertyDisplayName: "Mobile:", PropertyName: "RequestedWorkItem.Mobile" },

    ],

},

{

    columnFieldList: [

        { DataType: "String", PropertyDisplayName: "Title", PropertyName: "Title", Required: true, MinLength: 0, MaxLength: 200 }

    ],

},

Peter_Nordqvist

OK, almost there
Is it possible to not have a <br> after PropertyDisplayName, it looks like this now:

Brian_Wiest

That I am not sure on. As it the title and values appear to be a global css rule. I leave this for some of the better JS/CSS coders to answer. 

Roland_Kind

maybe you can implement this with the "inline" setting like:

{ DataType: "Boolean", PropertyDisplayName: "Escalated", PropertyName: "Escalated", Required: false, Inline: false }

if it is false you have "two lines" if it is true - it should be displayed in one line if i remember right - at least for boolean data type

Peter_Nordqvist

@Roland_Kind
Unfortunately, it is not supported apparently, "The Inline binding is not supportet by the div element"