none
SharePoint PeopleEditor - empty text or watermark text possible? RRS feed

  • Question

  • I have SharePoint 2010 application using a PeopleEditor control. I have a requirement to show the word "Optional" in this control field when initially loaded (empty). It is a watermark text to show the user that the field is optional.

    I know ASP textboxes and other controls have Empty-Text attributes to allow this. I'm not finding anything similar for PeopleEditor. Would anyone have some advice on how I could do this please?

    Thank you!


    Software Engineer

    Tuesday, March 10, 2015 10:27 PM

Answers

  • I was able to get this to work using a little javascript. The following jquery functions did it for me:

    $(document).ready(function () {
      var pkrUpLevelDiv = $('#<%=myPeopleEditorField.ClientID %>_upLevelDiv');
      pkrUpLevelDiv.html('<span style="color:Gray; font-style:italic">Optional</span>');
    
      pkrUpLevelDiv.on('focus', function () {
        if (pkrUpLevelDiv.html() === '<span style="color:Gray; font-style:italic">Optional</span>') {
          //clear placeholder text
          pkrUpLevelDiv.html('');
        }
      });
    
      pkrUpLevelDiv.on('blur', function () {
        if (pkrUpLevelDiv.html() === '') {
          //re-set placeholder text
          pkrUpLevelDiv.html('<span style="color:Gray; font-style:italic">Optional</span>');
        }
      });
    });

    Thanks for all the responses!


    Software Engineer

    • Marked as answer by SolidFish Wednesday, March 11, 2015 6:17 PM
    Wednesday, March 11, 2015 6:17 PM

All replies

  • You can leverage SPD to see if there's an option to do this. I don't know if this requirement could be achieve 100% using SPD, but at least it should help you get close to what you want.  This is if you have to do this just once.  But if you want to reuse this custom field, you might want to explore custom field types in SharePoint and achieve this through code.

    These postings are provided "AS IS" with no warranties, and confers no rights.

    Wednesday, March 11, 2015 1:59 AM
  • Check this link. You can get some useful information here.

    --------------------------------------------------------------

    ***If my post is answer for your query please mark as answer***

    ***If my answer is helpful please vote***

    Wednesday, March 11, 2015 10:48 AM
  • I was able to get this to work using a little javascript. The following jquery functions did it for me:

    $(document).ready(function () {
      var pkrUpLevelDiv = $('#<%=myPeopleEditorField.ClientID %>_upLevelDiv');
      pkrUpLevelDiv.html('<span style="color:Gray; font-style:italic">Optional</span>');
    
      pkrUpLevelDiv.on('focus', function () {
        if (pkrUpLevelDiv.html() === '<span style="color:Gray; font-style:italic">Optional</span>') {
          //clear placeholder text
          pkrUpLevelDiv.html('');
        }
      });
    
      pkrUpLevelDiv.on('blur', function () {
        if (pkrUpLevelDiv.html() === '') {
          //re-set placeholder text
          pkrUpLevelDiv.html('<span style="color:Gray; font-style:italic">Optional</span>');
        }
      });
    });

    Thanks for all the responses!


    Software Engineer

    • Marked as answer by SolidFish Wednesday, March 11, 2015 6:17 PM
    Wednesday, March 11, 2015 6:17 PM