Add watermark for input fields

Discussions about Forms Designer for SharePoint 2010.
Locked
AaronBets
Posts: 3
Joined: Wed Nov 14, 2012

17 Nov 2012

Hello,

I found it is possible to hide title of field on the form using Forms Designer, I like it. I want to hide it and add watermarks for each input, wehere will be displayed some guide text. Do you have any plans to add this functionality to Forms Designer?

User avatar
Anthony (Support)
Moderator
Posts: 11
Joined: Sat Nov 17, 2012

18 Nov 2012

Hi, AaronBets.

You can use jQuery watermark plugin to implement this functionality.

Just upload jQuery watermark script file to SharePoint library for example Styles Library or put in Layouts folder.

Then use JavaScript windows, accessible from SharePoint Forms Designer ribbon to put there some code, see details below.

Image

In JavaScript windows add following code:

//add jQuery watermark script to page

var s = document.createElement("script");

s.type = "text/javascript";

s.src = "/Style Library/jQuery/jquery.watermark.min.js";

$("head").append(s);

//Apply watermark for Name field

$(fd.field('Name').control().el()).watermark('Required information');



As you can see, the first part is adding jQuery watermark script to page, second part is applying watermark for Name field. Just replace it with your field name, or use it multiple times for few fields.

stieland
Posts: 17
Joined: Thu Jun 13, 2013

14 Jun 2013

I'm trying to get this to work and when I can't get past adding the js file.

When I have the following line in, it throws an unknow javascript error.

$("head").append(s);


Would this be different with SharePoint 2013?

User avatar
Dmitry Kozlov
Site Admin
Posts: 1524
Joined: Thu Jun 07, 2012

14 Jun 2013

In new versions of Forms Designer we include jquery-library in compatibility mode. So, if don't use your own jquery-library and wish to include dynamically additional jquery plugins you have to declare jQuery and $ variables global. Also we redesigned our JS-Framework, and the actual code that inserts watermark now looks this way:

Code: Select all

window.$ = $;
window.jQuery = $;

RegisterSod('watermark.js', '/Style Library/jQuery/jquery.watermark.min.js');
LoadSodByKey('watermark.js', null, true);

fd.field('Title').control()._el().find('input').watermark('Required information');
In this example I add watermark 'Required information' to 'Title' field input

stieland
Posts: 17
Joined: Thu Jun 13, 2013

14 Jun 2013

Perfect. That works great and makes sense.

Sonoma
Posts: 88
Joined: Wed Oct 15, 2014

19 Nov 2014

Thank you. It is something we may consider.

I am toying around with jscript and getting close.

User avatar
Dmitry Kozlov
Site Admin
Posts: 1524
Joined: Thu Jun 07, 2012

20 Nov 2014

I can get this to work as well but...

I have forms with multiple required fields(sometimes upto 100) I would like to add the water mark to:

set my required fields as normal during the list building
add watermark to all fields using the SPForms -> TITLE -> Value
hide all titles


Is this possible?

Sonoma
Posts: 88
Joined: Wed Oct 15, 2014

20 Nov 2014

Yes, it's possible with the help of JavaScript but requires a bit of coding. I'd suggest purchasing 100 support minutes in our store:

http://spform.com/buy

And send the detailed requirements to support@spform.com.

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests