Home Self-Service Portal - Community

Layout of incident.js

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>

Answers

  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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_NordqvistPeter_Nordqvist Customer Adept IT Monkey ✭✭
    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_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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_NordqvistPeter_Nordqvist Customer Adept IT Monkey ✭✭
    OK, almost there :smiley:
    Is it possible to not have a <br> after PropertyDisplayName, it looks like this now:


  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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_KindRoland_Kind Partner Advanced IT Monkey ✭✭✭
    edited September 2017

    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_NordqvistPeter_Nordqvist Customer Adept IT Monkey ✭✭
    @Roland_Kind
    Unfortunately, it is not supported apparently, "The Inline binding is not supportet by the div element"
Sign In or Register to comment.