Navigation

  • index
  • next |
  • previous |
  • SharePoint forms »
  • Control types in SharePoint Forms »

Getting started

  • Installation to Microsoft 365
  • Installation to SharePoint 2019/SE
  • Design forms

User guide

  • Ribbon actions
  • Form sets
  • Containers
  • Controls
    • Plain Text
    • Rich Text
    • HTML
    • Image
    • Hyperlink
    • Button
    • Submit
    • Captcha
    • Ink Sketch
    • Data Table
    • Likert Scale
    • Lookup
    • List or Library
    • User Calendar
  • SharePoint fields
  • Common fields
  • JavaScript
  • CSS
  • SharePoint web part
  • SharePoint form panel
  • Forms versioning

Provisioning forms

  • Provisioning API
  • Provisioning forms (samples)
  • Provisioning Form sets and Panel (samples)

Examples

  • Ticket management system
  • Dynamic form for a user group
  • Conference room reservation system
  • Discussion within a SharePoint form
  • Version history within a SharePoint form
  • Organize related docs in libraries and folders
  • Duplicate item button for List or Library
  • Embed forms into Microsoft Teams
  • Move new form page to another location

General

  • Version history (Microsoft 365)
  • Version history (SharePoint 2019/SE)
  • Roadmap
  • YouTube channel
  • Licensing
  • Manage subscription
  • Privacy policy
  • Data protection and security

Multilingual support

  • Create forms in multiple languages
  • Align fields to the right for Arabic, Hebrew and other languages

Navigation between forms

  • Generate a link to a SharePoint form
  • Redirect user after form submission
  • Open edit form by default for a user group
  • Open form in a dialog

Generating PDF documents

  • Save SharePoint form as PDF
  • Generate PDF from DOCX template with Plumsail Processes
  • Generate PDF from DOCX template with Word Online (Business)

Integration with Power Automate

  • Send e-mail notification after submitting SharePoint form
  • Start flow after submitting SharePoint form and wait for results
  • Start flow from List or Library and pass selected items
Documentation › Control types in SharePoint Forms › Hyperlink control

icon Hyperlink¶

The Hyperlink control allows you to add hyperlinks to your forms. Can be used to redirect users to different page or execute JavaScript on click.

Hyperlink control

This page contains a detailed description of the control properties and JavaScript samples which you can use with this control.

  • Properties

    • Name

    • Text

    • Url

    • Target

    • Click

    • Width

    • Class

    • Style

  • JavaScript framework

    • Get or set link text

    • Get or set link that opens on click

    • Get or set script that runs on click

    • Get HTML element

    • Hide control

Properties¶

Here you can find properties specifically related to the Hyperlink control.

Name¶

A unique identifier for the control.

Name property

JavaScript

The Name property allows to work with the control via JavaScript code, like this:

fd.spRendered(function(){
    //can access the control using its Name:
    fd.control('Hyperlink1').href = 'https://plumsail.com/';
 });

Text¶

Specify the link text:

Text property

Url¶

Specify the URL of the page clicking the link sends user to. Leave blank if not needed.

Hyperlink Url

Target¶

The target attribute specifies where to open the link. Enter _self to open link on the same page or _blank to open link in a new tab.

Hyperlink Target

Click¶

Add JavaScript to execute when a link is clicked.

Click code

JavaScript

Add event.preventDefault(); to your code to prevent redirection when the link is clicked:

event.preventDefault();
alert('Clicked');

Width¶

The property defines the width of the control in pixels.

If left blank, the control will be able to take up all the available width in the current grid cell.

Width property

Class¶

Add a CSS class to the control, which comes in handy with CSS or even JavaScript code. This will work as a class attribute for an HTML tag.

Control's class

The same class can be applied to multiple fields and controls, and then you can use CSS to modify the appearance of these. For example, here we’ve used the following CSS code in the CSS editor to give controls with my-class a rounded appearance:

.my-class {
    background-color: #1E90FF;
}

Style¶

Add custom CSS style to the control. This will work as a style attribute for an HTML tag.

Control's style

You can apply different styles to the control. For example, the following style will allow you to give shadow to the control:

box-shadow: 10px 10px 5px gray;

JavaScript framework¶

In this section, you can find basic examples of how to work with the control using JavaScript.

If you are not familiar with the JavaScript framework, get started with the JavaScript basics.

Note

The control is only accessible once the form is rendered, so all calls to the control must be inside fd.spRendered event:

fd.spRendered(function(){
    //hide the control
    fd.control('Control1').hidden = true;
    //show the control
    fd.control('Control1').hidden = false;
});

Get or set link text¶

Get or set the the link text with the following property:

//return the link text
fd.control('Control1').text;

//set the link text
fd.control('Control1').text = 'New text';

Get or set link that opens on click¶

Assign a link that will open on click, and the target property to select if it will open in a new tab:

 //return the link
 fd.control('Control1').href;

 //set a link that will open on click
 fd.control('Control1').href = 'https://plumsail.com/';

//set target attribute, this will open link in a new tab
 fd.control('Control1').target = '_blank';

Get or set script that runs on click¶

Property that holds JavaScript that is executed when link is clicked:

 //get the script that runs on click
 fd.control('Control1').onclick;

 //set the script that runs on click
 fd.control('Control1').onclick = 'alert("Hyperlink is clicked!")';

//trigger the code to run with JavaScript
fd.control('Control1').click();

Get HTML element¶

Access HTML element inside the control in order to modify it, hide it, or do something else.

//access control's HTML
var htmlControl = fd.control('Control1').$el;

Hide control¶

Hide a control from a user. The control value can still be accessed and changed with JavaScript.

//hide control
fd.control('Control1').hidden = true;

//show control
fd.control('Control1').hidden = false;

Navigation

  • index
  • next |
  • previous |
  • SharePoint forms »
  • Control types in SharePoint Forms »