How to add border to input control in display mode?

  • 7 September 2016
  • 14 replies
  • 29 views

Badge +2

Hi - I'd like to add a border, not background color, to input controls in display mode only. Does anyone know how to do that? If adding to custom css, what is the syntax to capture display mode only?

Thank you!

Joni


14 replies

Userlevel 5
Badge +14

it's possible eg. following way

NWF.FormFiller.Events.RegisterAfterReady(function () { 
    if (Is Display Mode){
        NWF$('#'+varBorderCtrl).closest('.nf-filler-control-border').css('border-style','solid');
    }
})
Badge +2

Thank you for responding. I added this to my form but it only resulted in timing out whenever I tried to view an item from either the Preview icon within Nintex, or from an existing item in the SharePoint list.

Joni

Userlevel 5
Badge +14

Have you just copy-pasted it and nothing more?

I've had assumed you understood what's going on in there.

What I guess could be a problem:

1. hopefully you have placed the code from above into custom javascript, not into custom css

2. make sure "Is Display Mode" is not placed there as a plain text but rather inserted as a reference

3. make sure you defined javascript variable for the control to be bordered  (varBorderCtrl in my example)

Badge +2

Obviously I am a newbie to using JS with Nintex. I added the code to Custom JS, not custom CSS, and replaced the Is Display Mode with the reference. But I do not know where to define the variable - is that in the Custom JS field as well?

Thank you,

Joni

Userlevel 5
Badge +14

Open configuration dialog for respective control  (double click on it)

at the very bottom there will be advanced section

within it you will find an option to define javascript variable

Sorry, I'm not able post a screenshots right now

Badge +2

I had already tried defining the variable in the advanced settings as you advised but, because the wrong behavior persisted, I assumed I'd done something incorrectly. Based on your feedback I added it correctly, but I must be doing something wrong as the display mode continues to freeze on "Please wait" without ever resolving. This is true from Preview in the Nintex form and from View Item on the SP list item. (In case it makes a difference, the test list consists of two Single Lines of Text fields, super simple.)

Badge +2

Screen shots of Nintex code input

Userlevel 5
Badge +14

ups, my bad!

I've tested with calculated value control which I was sure doesn't have any border in any mode. I haven't realized some controls do not get created javascript variables in display mode.

anyway, even the previous code doesn't do what's expected, it shouldn't cause any freezing...

for single line text control try following:

- if you do not need it for other purposes, remove javascript variable from control configuration

- define a class for the control, eg. borderCtrlClass

- change javascript code to the following

NWF.FormFiller.Events.RegisterAfterReady(function () { 
    if (Is Display Mode){
        NWF$('.borderCtrlClass').find('.nf-filler-control-border').css('border-style','solid');
    }
})‍‍‍‍‍
Badge +2

I really appreciate your help! Unfortunately this is still causing the preview to sit on "Please wait" indefinitely. Something so seemingly simple is so difficult!

Userlevel 5
Badge +14

let's try following

- publish the form

- open developer console (F12) - script or console tab

- try to view a list item

- check developer console whether there are not reported any errors

Badge +2

Badge +2

Userlevel 5
Badge +14

I wanted to see what's appearing in developer console when you're viewing the/single ITEM - ie. when item's display form is being opened/shown (resp. as you have written above when it's stuck on "Please wait")

so click on an item to open its content in display form and examine/post console content.

Userlevel 5
Badge +13

Hi all,

 

Our UX team are doing some research into our style builder for Universal Forms. We would appreciate your feedback on your current experience in styling your forms in any platform.

 

If you would like to provide feedback, please fill out the survey at Applying styles in Nintex Forms 

 

Thanks,

Euan

Reply