Home› Analyst Portal

Customizing forms - rows / columns layout

Gabriel_LencesGabriel_Lences Customer Adept IT Monkey ✭✭
edited June 2 in Analyst Portal

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 😅😔


Best Answer

  • Mikkel_MadsenMikkel_Madsen Advanced IT Monkey ✭✭✭
    Accepted Answer

    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());
    	});
    });
    

Answers

  • Gabriel_LencesGabriel_Lences Customer Adept IT Monkey ✭✭

    @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_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭

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



  • Gabriel_LencesGabriel_Lences Customer Adept IT Monkey ✭✭

    @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_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭
    Accepted Answer

    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_LencesGabriel_Lences Customer Adept IT Monkey ✭✭

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

Sign In or Register to comment.