Use the SmartObject hyperlink property to navigate to a URL

This article illustrates how to create a SmartObject that stores hyperlinks and how to show the SmartObject Hyperlink property on a view.

A view with a SmartObject Hyperlink

Try it yourself!

See the following for additional resources:

Configure the navigate To URL action
Use the Navigate to URL action when you want to open a URL or web page. You can open the target URL in the same browser window, a new tab in the same browser, or a model dialog window (similar to a pop-up dialog).
Add an expression to a hyperlink control using SmartObject properties for the expression parameters
Add an expression to a hyperlink control using SmartObject properties for the expression parameters.

Scenario

You work in Human Resources where you maintain an online form for employees to submit expense claims. Your company has a global presence and employees often submit claims that occurred in more than one country. As a convenience, you provide a link to an exchange rate website for employees to reference since all amounts must be in US dollars. The link to the exchange site is stored in a SmartObject and you retrieve it by calling the load method. Additionally, you can create conditional logic to load a different URL based on the value of another control.

Steps

In this scenario, you build two SmartObjects: Hyperlinks and Expense Details. You generate an item view based on each SmartObject. Finally, you work with rules on the details view to call a hyperlink when the view loads. In an optional step, you apply an advanced condition that loads a different hyperlink based on the amount of the expense.

Setup steps

The following steps set up the scenario from start to finish. If you want to skip the setup steps and view the topic step, go to Configure the hyperlink control on a view.

In K2 Designer, create a SmartBox SmartObject called Hyperlinks. Add one property, SmartObject Hyperlink with a Hyperlink data type. Create a SmartBox SmartObject called Expense Details. Add three properties, Employee Name (Text), Amount (Number), and HyperlinkID (Number). (Optional) Create categories first to keep your work organized.
1. Launch K2 Designer.
  If you do not know how to access K2 Designer, see Accessing K2 Sites.
2. Create categories to keep your work organized. Right-click All Items and select New Category. Use the image below as a guide for category names.
3. Right-click the Hyperlinks category and select New SmartObject. Name the SmartObject
  Hyperlinks
  and confirm the SmartBox type. Click Create.
4. On the Hyperlinks screen, click Add. For the name, enter
  SmartObject Hyperlink
  and assign the Hyperlink data type. Click OK. Click Finish to save and exit the SmartObject.
5. Create the expense details SmartObject. Right-click the Hyperlinks category and select New SmartObject.
6. Name the SmartObject
  Expense Details
  and confirm the SmartBox type. Click Create.
7. On the Expense Details screen, click Add. Name the first property
  Employee Name
  and keep the default Text data type. Add a second property called
  Amount
  and change the data type to Number. Add a third property called
  HyperlinkID
  and change the data type to Number. Click OK. Click Finish to save and exit the SmartObject.
Generate an item view based on the Expense Details SmartObject. Keep the default name, Expense Details Item. Generate an item view based on the Hyperlinks SmartObject. Keep the default name, Hyperlinks Item. Edit the Hyperlinks Item view. Enable the SmartObject Hyperlink control (by default, it is read-only). Run the Hyperlinks Item view and create at least two items using the table below as a guide.
URL Display
https://www.xe.com/?
Live Exchange Rates
https://help.k2.com K2 Knowledge Center
1. Right-click the Expense Details SmartObject and select Generate Views. In the Views section, check the Item view option. Keep the default name, Expense Details Item. Click OK.
2. Right-click the Hyperlinks SmartObject and select Generate Views. In the Views section, check the Item view option. Keep the default name, Hyperlinks Item. Click OK.
3. By default, the SmartObject Hyperlink is read-only. You must enable the control so you can enter hyperlinks and save them to the SmartObject. Right-click the Hyperlinks Item view and select Edit.
4. Select the [SmartObject Hyperlink Hyperlink] data label. In the Properties pane on the left side of your screen, locate the General heading. Uncheck the Read-Only property. The data label converts to a clickable link. Click Finish to save and exit the view.
5. Next, you run the view and add hyperlinks so you have content to work with. Right-click the Hyperlinks Item view and select Run.
6. The view opens in K2 Designer. Click the Click here to specify hyperlink link.
7. On the Configure Hyperlink screen, enter
  https://www.xe.com/?
  for the URL and the for Display, enter
  Live Exchange Rates
  and click OK.
8. Click Create to save the item to the SmartObject. Notice the ID text box shows 1. This value is an autonumber that increments with each item you create a record in the SmartObject. The link text for the control reflects the display name value.
9. Click the Hyperlinks Item view title in the category to close the runtime view. There are no rules in place that clear the view controls after you create a new item, so you must close the view and reopen it to add another hyperlink.
10. Right-click the Hyperlinks Item view and select Run.
11. Click the Click here to specify hyperlink link. For the URL, enter
  https://help.k2.com
  and for the Display, enter
  K2 Knowledge Center
  and click OK. Click Create. Close the runtime view by clicking the view title in the categories.
Edit the Expense Details Item view. From the Toolbox, add a Hyperlink control to the canvas in the second row, second column cell. You use this control to display the hyperlink that you load from the Hyperlinks SmartObject.
The next step is to add a hyperlink control to your details view. Using rules, you map the ID of the Live Exchange Rates hyperlink to this control, which displays the link on your view.
1. Right-click the Expense Details Item view and select Edit.
2. From the Toolbox on the left side of your screen, drag a Hyperlink control into the second row, second column cell.

URL	Display
https://www.xe.com/?	Live Exchange Rates
https://help.k2.com	K2 Knowledge Center

Configure the hyperlink control on a view

In the next step, you add a rule that loads the Live Exchange Rates link when you open the view. The link loads in the hyperlink control you added in the previous step.

Add a rule with a view initialize event. Call the load method of the Hyperlinks SmartObject. Enter 1 for the ID mapping destination. For the output mappings, map the SmartObject Hyperlink return property to the Hyperlink control. Run the view and test the link.
1. Right-click the Expense Details Item view and select Edit.
2. Click the Rules tab. Click Add Rule.
  Rules consist of events, conditions, and actions. A valid rule contains at least one action.
  - Events define when the rule should run, such as when a button is clicked, or when the form loads. (Events are optional, you can define "event-less" rules that you can call from other rules.)
  - Conditions define whether the rule should run. If the criteria are true, continue the rule, and if the criteria are not met, stop the rule. For example, a condition might evaluate a form to confirm that required fields have content. (Conditions are optional - not all rules will require conditions.)
  - Actions define what the rule should do. For example, show a message, start a workflow, or enable a form field. Rules can contain multiple actions that are run in sequence or in parallel.
3. With the Events tab active, click When the View executes a method to add it to the rule definition pane. You can also search for keywords instead of scrolling through all the events, conditions, and actions.
4. Click the select method link and select Initialize. The event occurs when the view loads.
5. Click the Actions tab. You want to call the load method of the Hyperlinks SmartObject. The load method returns one record (one hyperlink). Click Execute a SmartObject method to add it to the rule definition pane. Click the select SmartObject link, then navigate to and select the Hyperlinks SmartObject. Click the select method link and select Load.
6. Next, you need to tell K2 which record to load. Click (configure).
7. On the Input Mappings screen, enter
  1
  into the ID text box. You are loading the SmartObject record that has an ID of 1. This is the Live Exchange Rates record.
8. Click the Output Mappings tab. Map the Context Browser > Return Properties > SmartObject Hyperlink to Mapping Destinations > Controls > Hyperlink. Click Finish to save the configuration. Click OK to save the rule. This rule loads the hyperlink (that has an ID of 1) from the Hyperlinks SmartObject into the hyperlink control you added to the view canvas.
9. Click Finish to save and exit the view.
10. Next, test the hyperlink. Right-click the Expense Details Item view and select Run.
11. The view opens. Notice the hyperlink control displays Live Exchange Rates. Looking at the rule you configured, K2 calls the load method (of the Hyperlinks SmartObject) when the view opens. The load method uses the ID value (of 1) to retrieve the correct record. The display attribute of the hyperlink property is Live Exchange Rates, while the URL attribute is https://www.xe.com/?. Click the Live Exchange Rates hyperlink. The exchange rates site opens in a new browser window.
(Optional) Use a condition to dynamically load a hyperlink. Add a new rule for when the Amount Text Box changes. Add an advanced condition that says if the amount is less than or equal to 5, load the Live Exchange Rates hyperlink. If the amount is greater than 5, load the K2 Knowledge Center hyperlink. Test the condition by entering numbers into the Amount text box, then confirming the hyperlink control reflects the condition outcome.
In the previous step, you manually entered the ID for the hyperlink record K2 loads when the view opens. In this optional step, you configure a rule that loads a hyperlink based on an advanced condition. In this case, the value in the Amount text box determines which hyperlink to load. This additional logic is to illustrate how you can dynamically change the hyperlink based on other values in the form and is not designed to be a valid scenario.
1. Edit the Expense Details Item view.
2. Add a new rule.
3. You want the rule to execute each time the value in the Amount text box changes. With the Events tab active, click When a control on the View raises an event to add it to the rule definition pane. Click the select control link and select Amount Text Box. Click the select event link and select Changed.
4. Next, you add an advanced condition that looks at the current value in the Amount text box. Click the Conditions tab. Click When an advanced condition is true to add it to the rule definition pane. Click the an advanced condition link.
5. Click Add. From the Context Browser, drag the Controls > Amount Text Box into the left parameter. Change the Operator to Less Than Equals. Enter
  5
  into the right parameter. Click OK to save the condition.
6. Now that you have the condition in place, you need to add an action that executes if the condition is met. Click the Actions tab. Click Execute a SmartObject method to add it to the rule definition pane. Select the Hyperlinks SmartObject and the Load method. Click (configure).
7. On the Input Mappings screen, enter
  1
  for the ID input property.
8. On the Output Mappings screen, map the Return Properties > SmartObject Hyperlink to the Controls > Hyperlink mapping destination. Click Finish to save the action.
9. Switch back to the Conditions tab. Click Else to add it to the rule definition pane.
10. If the amount is greater than 5, you load the K2 Knowledge Center hyperlink. Click the Actions tab. Click Execute a SmartObject method to add it to the rule definition pane. Select the Hyperlinks SmartObject and the Load method. Click (configure).
11. On the Input Mappings screen, enter
  2
  for the ID input property.
12. On the Output Mappings screen, map the Return Properties > SmartObject Hyperlink to the Controls > Hyperlink mapping destination. Click Finish to save the action.
13. Your rule should look like the image below. Click OK to save the rule. Click Finish to save and exit the view.
14. Test the conditional statement. Right-click the Expense Details Item view and select Run. The hyperlink control should display Live Exchange Rates since this is the hyperlink you configured for when you open the view.
15. Enter
  3
  into the Amount text box and press <ENTER>. The hyperlink does not change because the amount is less than or equal to 5.
16. Enter
  8
  into the Amount text box and press <ENTER>. The hyperlink changes to K2 Knowledge Center because the amount is greater than 5.

Review

Use a SmartObject to store hyperlinks when you need to maintain URLs outside of your form or for conditional logic in the form. For example, you might apply an advanced condition and then load a specific hyperlink based on the condition. The SmartObject Hyperlink property has two attributes: URL and Display. The SmartObject uses the default K2 methods: Create, Delete, Get List, Load, and Save.