Policy Automation for B2C Service

Get Involved. Join the Conversation.

Topic

    Steven Robert
    Read Only Inputs (17D)Answered
    Topic posted November 7, 2017 by Steven RobertBlue Ribbon: 750+ Points 
    150 Views, 6 Comments
    Title:
    Read Only Inputs (17D)
    Content:

    Hello

    Is it possible to change the style of a read only input?

    I would like to make the background darker, and (if possible) disable the ability to put the cursor into the cell. Currently it is not clear that a cell is read only (particularly in a table input).

    Can't seem to find the setting - if it's not there currently, could this be incorporated into interview stylings?

    Many thanks

    Steven

    Version:
    17D

    Best Comment

    Michael Thomsen

    Hi Steven,

    Changing the background colour of an input when it is read only can be done through Interview Extensions, something like:

    OraclePolicyAutomation.AddExtension({
        style: {
            textInput: function(control) {
                if (control.isReadOnly() ) {
                        return {
                            style: {
                                backgroundColor: "red"
                            }
                        }
                }
            },  
        }
    });

    Obviously you'll need to do this for different types of inputs i.e text-area etc.  Refer to the doco for more info on control types.

    To disable the caret on focus, it can be done easily with jQuery.  To do this, you will need to include jQuery in the /resources folder then in your custom js script use:

    $(document).on('focus', 'input[readonly]', function () {
            this.blur();
        });

    Alternatively if you cannot use jQuery, you can render the input via Interview Extensions and use 'onfocus="this.blur()" ' on the input i.e:

    
    <input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
    

    Tip: ensure your custom JavaScript file uses a name that starts with a letter that appears alphabetically after the jQuery library as JavaScript files are loaded alphabetically by OPA.

    Regards,

    Michael.

    Comment

     

    • Michael Thomsen

      Hi Steven,

      Changing the background colour of an input when it is read only can be done through Interview Extensions, something like:

      OraclePolicyAutomation.AddExtension({
          style: {
              textInput: function(control) {
                  if (control.isReadOnly() ) {
                          return {
                              style: {
                                  backgroundColor: "red"
                              }
                          }
                  }
              },  
          }
      });

      Obviously you'll need to do this for different types of inputs i.e text-area etc.  Refer to the doco for more info on control types.

      To disable the caret on focus, it can be done easily with jQuery.  To do this, you will need to include jQuery in the /resources folder then in your custom js script use:

      $(document).on('focus', 'input[readonly]', function () {
              this.blur();
          });

      Alternatively if you cannot use jQuery, you can render the input via Interview Extensions and use 'onfocus="this.blur()" ' on the input i.e:

      
      <input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
      

      Tip: ensure your custom JavaScript file uses a name that starts with a letter that appears alphabetically after the jQuery library as JavaScript files are loaded alphabetically by OPA.

      Regards,

      Michael.

    • Ian Hunter

      Or you could cheat and just override the css class:

      .opa-interview input[type=text][readonly] {

           background-color: darkgrey !important;

           cursor: none !important;

      }

      Just pop that in a .css file  under interview-theme\resources...

    • Davin Fifield

      Thanks Ian,

      Note that interview extensions are designed to be upgrade safe, whereas directly modifying .css styles is not.

      Davin.

    • Ian Hunter

      Agreed, I'm trying to overcome having an extra "lazy" gene. :)

    • Steven Robert

      Thanks all for such speedy and excellent advice!

    • Sue Novak

      I have added Michael's important tip about to the JavaScript files being loaded in the interview in alphabetical order by file name to the documentation here:

      http://documentation.custhelp.com/euf/assets/devdocs/unversioned/PolicyAutomation/en/Default.htm#Guides/Developer_Guide/Web_Interviews/Styles_and_scripts/Add_JavaScript_to_interview_screens.htm#Add