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
SmartObject Hyperlink

See the following for additional resources:

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.

  1. 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.
      Create Categories
    3. Right-click the Hyperlinks category and select New SmartObject. Name the SmartObject
      Hyperlinks
      and confirm the SmartBox type. Click Create.
      Create SmartObject
    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.
      Add Property
    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.
      Create SmartObject
    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.
      Create Second SmartObject
  2. 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.
    URLDisplay

    https://www.xe.com/?

    Live Exchange Rates
    https://help.k2.comK2 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.
      Generate Expense Details Item View
    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.
      Generate Hyplinks Item View
    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.
      Enable Hyperlink Control
    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.
      Enter Hyperlink Attributes
    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.
      Hyperlink Properties
    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.
      Create Second Hyperlink
  3. 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.
      Add Hyperlink Control

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.

  1. 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.
      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.
      Add Event View Initialize
    4. Click the select method link and select Initialize. The event occurs when the view loads.
      View Executed Initialize
    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.
      Execute SmartObject Method
    6. Next, you need to tell K2 which record to load. Click (configure).
      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.
      Enter ID
    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.
      Output Mappings
    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.
      Test the View
  2. (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.
      Edit View Initialize 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.
      When Control 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.
      Advanced Condition True
    5. In the rule designer, you add conditions based on operators. In this case, your condition is when Amount Text Box (is less than or equal to) 5.

    6. 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.
      Add Condition
    7. 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).
      Execute SmartObject Method
    8. On the Input Mappings screen, enter
      1
      for the ID input property.
      Input Property
    9. On the Output Mappings screen, map the Return Properties > SmartObject Hyperlink to the Controls > Hyperlink mapping destination. Click Finish to save the action.
      Output Properties
    10. So far, your rule says when the value in the Amount text box changes, check to see if the value is less than or equal to 5. If it is, then load the Live Exchange Rates hyperlink. Now, you need to complete the condition for values that are greater than 5.

    11. Switch back to the Conditions tab. Click Else to add it to the rule definition pane.
      Add Else Condition
    12. 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).
      Execute SmartObject Method
    13. On the Input Mappings screen, enter
      2
      for the ID input property.
      Input Property
    14. On the Output Mappings screen, map the Return Properties > SmartObject Hyperlink to the Controls > Hyperlink mapping destination. Click Finish to save the action.
      Output Properties
    15. Your rule should look like the image below. Click OK to save the rule. Click Finish to save and exit the view.
      Compete Rule
    16. 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.
    17. 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.
      First Condition
    18. Enter
      8
      into the Amount text box and press <ENTER>. The hyperlink changes to K2 Knowledge Center because the amount is greater than 5.
      Else Condition
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.