HREF Widget

Use this widget on the form to render a hyperlink.

Last published at: August 13th, 2023

Description:

Display a hyperlink control on the form.

Inputs

  • ID/Name - Name of widget generated by FlowWright 
  • Hyperlink Name - Enter description for hyperlink text
  • URL - Enter the http URL link
  • Open Window - On click open the URL in new window
  • Hide - Select checkbox to Hide (tick mark)
  • Tool Tip - Enter information to display on mouse hover on form render
  • Styles - Enter the CSS scripts for widget styles
  • Apply Classes - Select between custom classes defined 
  • Save - Save the input values 
  • Delete - Remove this form widget from the designer page 
  • Close - Close the input popup window
 

 

Design:

 

 

Example: 

Let’s build and execute the “hrefDef” example.  

  • Create a new form definition called “hrefDef”
  • Select the Open Designer checkbox and click the “Create” button
  • Drag a Hyperlink widget to the canvas
  • Double-click on the widget to configure the “Settings” properties. Provide a name to the control. Provide an URL to navigate to. Select checkbox to open the target in new window. Select checkbox to hide the hyperlink during run time. 
  • Double-click on the widget to configure the “Styling” properties. Provide the style script. Select the class from the drop down list if previously uploaded.  
  • Double-click on the widget to configure the “Other” properties. Provide the tool tip text.
  • Click on Save button and Close the popup window
  • Navigate to UI menu and preview the form. Click on the hyperlink. THe page is rendered in a new tab. 
  • A sample graphic is shown below.  
  • The hyperlink widget can also be initialized through the JQuery expression as below.
$("#href1").attr('href', "http://www.google.com"); 
  • Or, Use the UpdateVariable step to initialize the variable.URLpath (string) variable and use the JQuery expression like below.
variable.URLpath = “http://www.google.com”
$("#href1").attr('href', variable.URLpath);