Policy Automation for B2C Service

Get Involved. Join the Conversation.

Topic

    Sheri Hastings
    Formatting a Phone Number in a Customer InterviewAnswered
    Topic posted July 21, 2016 by Sheri Hastings 
    246 Views, 9 Comments
    Title:
    Formatting a Phone Number in a Customer Interview
    Content:

    I am asking for a phone number in one of my OPA interviews. I map that field back to Service Cloud.  I want the phone number entered in the format ***-***-XXXX.  I tried using the Phone.PhoneType Attribute but even without mapping I get an error that the Input Style Text Box is not Valid.

    Is there a way I can mask the input to force that for an interview?

     

    Best Comment

    Davin Fifield

    Sheri, assuming you get this using an actual phone number field, you will then need to use a custom JavaScript to format it as a phone number as you type.

    An easy way to trigger this JavaScript is to add something unique onto the end of the control label in the OPA screen definition, like "**MyControl". The JavaScript then looks for any controls with an associated label containing that unique text, and applies the changes needed.

    The JavaScript might be something like this:

    $(function () {
        function formatMyControl(src) {
        /* Put logic for changing the control contents in here */
        }
     
        /* This is applied to any control on the page that has their label containing '**MyControl' */
     
        $("label:contains('**MyControl')").each(function () {
            var ctl = $(this).closest(".control-item").find(".control input");
            $(this).text($(this).text().replace("\**MyControl", ""));
            if (ctl.length > 0) {
                formatMyControl(ctl[0]);
            }
        });
    });
    

    Comment

     

    • Scott Berry

      Phone.PhoneType sound like a Menu(Service Cloud)/Value list(OPM), so the attribute type will have been changed in the OPM Attrubte editor to the corresponding value list type. PhoneType will have values like "Fax", "Home", "Mobile" etc, so Input Style isn't valid, only Drop Down is so that you can select one of the enumerated values.

      In addition to selecting the Type of phone number, a second field should be mapped which will contain the phone number's value.

      Can I ask what mapping context has exposed Phone.PhoneType? i.e. what is table is the parent entity of this attribute mapped to. We have flattened the Phone numbers of Contact into easy-to-map fields such as "FaxPhone", "HomePhone" etc, perhaps other tables need similar treatment to make mapping more simple.

    • Davin Fifield

      Sheri, assuming you get this using an actual phone number field, you will then need to use a custom JavaScript to format it as a phone number as you type.

      An easy way to trigger this JavaScript is to add something unique onto the end of the control label in the OPA screen definition, like "**MyControl". The JavaScript then looks for any controls with an associated label containing that unique text, and applies the changes needed.

      The JavaScript might be something like this:

      $(function () {
          function formatMyControl(src) {
          /* Put logic for changing the control contents in here */
          }
       
          /* This is applied to any control on the page that has their label containing '**MyControl' */
       
          $("label:contains('**MyControl')").each(function () {
              var ctl = $(this).closest(".control-item").find(".control input");
              $(this).text($(this).text().replace("\**MyControl", ""));
              if (ctl.length > 0) {
                  formatMyControl(ctl[0]);
              }
          });
      });
      
    • Sheri Hastings

      Thank you!  I will try to do this!

       

    • Sheri Hastings

      Scott and Davin  - Thank you.
      Scott - I am not sure how to tell what mapping context has exposed Phone.PhoneType - I just saw it in the data mapping in Service Cloud. (I'm not really a developer so a bit lost here,)

       

      Davin - I am not sure what you mean by adding **MyControl to the "screen control label".
      I have an input field Patient Phone mapped in from the Customer record.
       I tried changing What is Patient Phone? to Phone: **MyControl... but that just made the label for the field literally that.

      Nit sure where to add to the screen control label?

       

    • Davin Fifield

      Sheri, you've done the right thing by changing What is Patient Phone? to Phone: **MyControl.

      Then you need to choose Custom Files from the Styles dialog, and create a new .js file in the directory that comes up. Put the JavaScript above in that .js file and save it.  You will know it is working if when you Debug the screen the **MyControl is not there.

      Once you know it is working, you can modify the "src" variable (which will contain the partially entered phone number) inside the formatMyControl function however you want. E.g. take the first three characters, then put a '-', then put the next three characters followed by another '-' etc. That will vary depending on how you want to format the phone number.

       

       

    • Sheri Hastings

      Davin
      So I was able to add the MyControl javascript to the file and get the my control not to show up.
      I am trying to format the phone number as ***-***-XXXX

      I added  the following code in the src function.  I an not seeing the alerts popping (added those afterwards) and nothing seems to be executing to modify the phone number as I enter it?

      I am not a developer and don't know JS. I just  pulled this code off a site online. set phonenum to src here but also tried

      modifying the function name also.

      What am I doing wrong?

       

       

      var phonenum = src;
        var regexObj = /^(?:\+?1[-. ]?)?(?:\(?([0-9]{3})\)?[-. ]?)?([0-9]{3})[-. ]?([0-9]{4})$/;
        

       if (regexObj.test(phonenum)) {
       window.alert("if1");
              var parts = phonenum.match(regexObj);
              var phone = "";
              if (parts[1]) { phone += "+1 (" + parts[1] + ") "; }
              phone += parts[2] + "-" + parts[3];
              return phone;
          }
          else {
       window.alert("else1");
              //invalid phone number
              return phonenum;
          }
       

    • Davin Fifield

      Sheri, regular expressions take some fiddling to get work. You could try posting your JavaScript questions to somewhere like stack overflow. Or someone that follows the OPA forum on Oracle.com might have done something similar and be able to help.

    • Kurt Helfrich

      Davin:

      I just saw this today while trying to solve a new problem (validating the value of one field based on a type selected in another field - maybe you have a reference example for that...).  It was quite an aha! moment for me.  So, reading between the lines a bit here, I have some questions.

      (1) Can we assume that jQuery is always available in the context of the interview?
      (2) Is there any naming convention for the file?
      (3) Can there be more than one js file?
      (4) How is js execution controlled?

      I did some searching now that I understand jQuery is part of the package.  Is there a documentation starting point for understanding that level of the interviews that you would recommend?

    • Davin Fifield

      Kurt,

       

      (1) For policy models that are using August 2016 interview styling, yes. For latest version interview styling, you'd need to add jquery via Custom Files

      (2) Just has to have .js extension

      (3) Yes

      (4) The js files are loaded into the page in alphabetical order

       

      Davin.