Intermix Fields with Text

Discussions about Forms Designer for SharePoint 2013 / 2016 and Office 365.
Locked
User avatar
smithme
Posts: 45
Joined: Wed Jul 26, 2017

07 Aug 2017

I am trying to provide a form that the printed result is the values of the fields intermixed with static text. Any suggestions on how best to do that?

Something like:

I, <<name>>, do hear by...
City of Nampa
Idaho
United States of America

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

08 Aug 2017

Hello!
There are at least two ways you can do it. The easiest way is to include field name in brackets, like this:

Code: Select all

I, [NameField], do hereby...
That's a good option, but the value is not updated dynamically. It's loaded with the form.

Alternatively, you can use JavaScript to detect changes in the fields that are inserted into the text and write a script to change the text dynamically. Something like this:

Code: Select all

function changeText() {
	var name = fd.field('Title').value();
	var newText = 'I, ' + name + ', do hereby...';
	$('.text').text(newText);
}

fd.field('Title').change(changeText);
Cheers

User avatar
smithme
Posts: 45
Joined: Wed Jul 26, 2017

08 Aug 2017

I wanted to share my implementation of this use case in the hopes that it helps someone else later. Some aspects to note. In my use case I had to present both an English and Spanish version of the same form static text. What I did was:
  1. Create a New and Edit form with the fields but none of the static text.
  2. Created a Display form with the static text in an HTML object and <span> tags for each of the fields.
  3. Add all of the form fields and hide them.
  4. Added JS that takes the values of the fields and inserts them into <span> tags based on their class tags for each fields.
  5. Turn on the Print and PDF buttons for the Display form.
The static text was entered into the HTML control like this:

Code: Select all

<p>Lorem Ipsum is simply dummy <span class='name'></span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <span class='address'></span> text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived <span class='phone'></span> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
The Javascript was added under the Javascript button and looked like this:

Code: Select all

$(".name").html(fd.field("Title").value());
$(".address").html(fd.field("Address").value());
$(".phone").html(fd.field("Phone").value());
City of Nampa
Idaho
United States of America

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

09 Aug 2017

Great solution as well! As you can see, Forms Designer offers a huge variety of options when it comes to customization of Forms. Standard in-built tools might be limited in their functionality, but you can implement your own tools and use them inside of your Forms.
Cheers

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 21 guests