Skip to content

Link Widget

Link widget allows you to define a hyperlink that you can interact with (select and click) and navigate to an external location or a location within the application.

You can add the Link Widget only to the VBox form. This widget will be available in the Widgets palette when the VBox form is selected in the app canvas.

The Link widget capabilities can be broadly categorized into the following:

Data Management

Properties Description
externalURL Specifies that the URL must be opened directly from the web site without having to contact the Volt MX Server.
submitURL Specifies the URL to which the current Form data should be submitted, without contacting Volt MX Server.
text Specifies the URL to which the current Form data should be submitted, without contacting Volt MX Server.

Gestures

Events Description
[onClick](Link_Events.md#onClick() An event callback that is invoked by the platform when the user performs a click action on the link.
onScrollWidgetPosition An event callback is invoked by the platform when the widget location position gets changed on scrolling.

UI Appearance

Properties Description
backgroundColor Specifies the background color of the widget in hex format.
blockedUISkin Specifies the skin that must be used to block the interface until the action in progress (for example, a service call) is completed.
contentAlignment Specifies the alignment of the text on the Link with respect to its boundaries.
focusSkin Specifies the look and feel of the Link when in focus.
glowEffect Specifies if there must be glow effect when you touch the link.
hExpand Specifies if the widget should occupy all the width available to it.
hoverSkin Specifies the look and feel of a widget when the cursor hovers on the widget.
margin Defines the space around a widget.
marginInPixel Indicates if the margin is to be applied in pixels or in percentage.
padding Defines the space between the content of the widget and the widget boundaries.
paddingInPixel Indicates if the padding is to be applied in pixels or in percentage.
showProgressIndicator Specifies if the progress indicator must be displayed when the link is clicked.
widgetAlignment Indicates how a widget is to be anchored with respect to its parent.

Miscellaneous

Properties Description
contextMenu A context menu is a menu that appears upon clicking a widget.
toolTip Specifies the hint text when the cursor hovers over a widget, without clicking it.

Configurations Common To All Widgets

Events Description
preOnclickJS Allows the developer to execute custom javascript function before the onClick callback of the Link is invoked.
postOnclickJS Allows the developer to execute custom javascript function after the onClick callback of the Link is invoked.
Properties Description
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
enableCache Eproperty enables you to improve the performance of Positional Dimension Animations.
id id is a unique identifier of Line consisting of alpha numeric characters.
info A custom JSObject with the key value pairs that a developer can use to store the context with the widget.
isVisible Controls the visibility of a widget on the form. 

var myLink = new voltmx.ui.Link(basicConf, layoutConf, pspConf);
  • basicConf is an object with basic properties.
  • layoutConf is an object with layout properties.
  • pspConf is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored

Example

//Defining properties for a link widget.
var linkBasic = {
    id: "link1",
    skin: "linkSkin",
    focusSkin: "linkFSkin",
    text: "Click here",
    isVisible: true
};

var linkLayout = {
    containerWeight: 100,
    padding: [5, 5, 5, 5],
    margin: [5, 5, 5, 5],
    paddingInPixel: true,
    marginInPixel: true,
    hExpand: true,
    vExpand: true
};

var linkPSP = {
    blockedUISkin: "blkSkin"
};

//Creating the link.
var link1 = new voltmx.ui.Link(linkBasic, linkLayout, linkPSP);

//Reading blockedUISkin of Link.
alert("Link blockedUISkin::" + link1.blockedUISkin);

Customizing Appearance

You can customize the appearance of the Link widget using the following properties:

  • widgetAlignment: Specifies the alignment of the widget.
  • margin: Defines the space around a widget.
  • padding: Defines the space between the content of the widget and the widget boundaries.
  • skin: Specifies the skin.
  • focusSkin: Specifies the focus skin.

Important Considerations

Link widget has the following considerations:

  • If you do not specify a skin, the default skin is applied to the link (link appears in blue font and is underlined).
  • If you do not specify a focusSkin, the default focus skin is applied to the link (link appears in black font and is underlined).
  • If you specify a skin or focusSkin without an underline, when rendered, the link will appear without an underline on the platform.