Skip to main content
Nintex Community Menu Bar

How to add border to input control in display mode?

  • September 7, 2016
  • 14 replies
  • 88 views

Forum|alt.badge.img+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

Forum|alt.badge.img+14
  • Scholar
  • September 8, 2016

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

Forum|alt.badge.img+2
  • Author
  • Nintex Partner
  • September 8, 2016

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


Forum|alt.badge.img+14
  • Scholar
  • September 8, 2016

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)


Forum|alt.badge.img+2
  • Author
  • Nintex Partner
  • September 8, 2016

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


Forum|alt.badge.img+14
  • Scholar
  • September 8, 2016

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


Forum|alt.badge.img+2
  • Author
  • Nintex Partner
  • September 8, 2016

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.)


Forum|alt.badge.img+2
  • Author
  • Nintex Partner
  • September 8, 2016

Screen shots of Nintex code input


Forum|alt.badge.img+14
  • Scholar
  • September 8, 2016

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');
    }
})‍‍‍‍‍

Forum|alt.badge.img+2
  • Author
  • Nintex Partner
  • September 8, 2016

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!


Forum|alt.badge.img+14
  • Scholar
  • September 8, 2016

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


Forum|alt.badge.img+2
  • Author
  • Nintex Partner
  • September 8, 2016


Forum|alt.badge.img+2
  • Author
  • Nintex Partner
  • September 8, 2016


Forum|alt.badge.img+14
  • Scholar
  • September 8, 2016

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.


EuanGamble
Nintex Employee
Forum|alt.badge.img+13
  • Nintex Employee
  • October 29, 2018

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