IT Monkey:   


Formal Cireson Support (phone, email, and web) is not included with the free Self-Service Portal – Community app. For trouble shooting assistance, take advantage of the Cireson Community to find answers to your questions. However, if you’d like to purchase a Support Package to access more formal Cireson Support (phone, email, and web), please contact us today to learn more on the pricing options.

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:

"Default":{    tabList: [        /*********/        /** TAB **/        /*********/        {            name: "General",            content: [                {                    customFieldGroupList: [                        {                            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" }, { DataType: "Display", PropertyDisplayName: "Mobile:", PropertyName: "RequestedWorkItem.Mobile" }, { DataType: "Display", PropertyDisplayName: "Company:", PropertyName: "RequestedWorkItem.Company" }                                    ],                                },

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.