Online search

In this section, you will learn how to add a normal link or a search engine query and how to check whether the user has clicked them. Links can be opened when a certain event occurs. You can also group links together and set shortcuts for them to allow users to work faster.

Insert a normal link

If you want to insert a normal link without additional formatting, use the view.link component. The link is underlined and changes color after clicking on it.

{
  "type": "view.link",
  "content": "Link text",
  "url": "url"
}

View example in the sandbox.

Create a search query

For some tasks, you may need to create a link that opens the entered query in the search engine you selected. To do this, use the helper.search-query component. You can see the list of available search engines in the engine property.

{
  "type": "view.link",
  "content": "Link text",
  "url": {
    "type": "helper.search-query",
    "query": "search query",
    "engine": "yandex"
  }
}
Tip. Need to insert links that have the same search query and point to multiple different search engines? To avoid duplicating the query, you can move query to the input data and then refer to this data using "path": "query".

View example in the sandbox.

If the search engine you need is not available in the engine property, leave this field empty and enter the search query in query using the helper.join component.

View example in the sandbox.

Group links together

To group multiple links together, use the view.link-group component. Links will be underlined. For emphasis, you can add a border around one of the links and remove the underline. To do this, set the theme property to primary for this link.

View example in the sandbox.

Create a button link

You can create a link in the form of a button using the action.open-link component. The button is added using the view.action-button component. In thepayload component, specify the address or the helper.search-query component with the search query.

{
  "type": "view.action-button",
  "label": "Text on the button",
  "action": {
    "type": "action.open-link",
    "payload": "url"
  }
}
Tip. To make sure the button looks nice and doesn't stretch to the entire screen width, set view.action-button as an element of the items array for the view.list component.

When adding multiple buttons, you can arrange them horizontally (instead of vertically) in the direction property.

View example in the sandbox.

Check if the link was clicked

To check if the user clicked the link, use the condition.link-opened component by specifying it in the validation property.

Remember that the condition only works if a user clicks the link in the interface. If the link is opened via the address bar, the condition doesn't work.

View example in the sandbox.

Add keyboard shortcuts

You can add keyboard shortcuts for links. Shortcuts allow users to open links by pressing a keyboard key, which helps them work faster.

To add a shortcut, use the plugin.hotkeys plugin. Select a key and assign it to open the link, using the action.open-link component.

{
  "type": "plugin.hotkeys",
  "y": {
    "type": "action.open-link",
    "payload": "url"
  }
}

View example in the sandbox.

Learn more about shortcuts in Configure keyboard shortcuts.

Use event-driven links

You can set a link to open when a certain event occurs. For example, when the user chooses an option, this can open a certain search query. To do this, use the plugin.trigger plugin.

View example in the sandbox.

Reuse the code

Just like any piece of the code, the code for opening the link and its address can be reused using the {"$ref": "path.to.element"} structure. This is useful when adding keyboard shortcuts. To avoid duplicating the code for the link display and for plugin.hotkeys, just enter the code once in vars.

View example in the sandbox.

Learn more about reusing the code in Reuse code.

Create a task

To create a template for tasks where users open links, we used the following components:

View example in the sandbox.