Components

Link

A Link component links to other pages - it can be used on its own or it can be added to parent components such as Table, Detail View, and Card List. This can be useful if you want to create a dynamic URL template that utilizes data in a Space.

Ways to use a link

Link to another space using dynamic URL
Jane created two Spaces: “All Companies” (displays a list of Jane’s customers) and “Company Profile” (displays detailed information for a specified company). In All Companies, when a user selects a specific company (let’s say with company_id=123), they should be taken to the Company Profile for company_id= 123.

Link to external pages
John created a Space “Customers waiting to onboard” and wants to display a link that opens another tool he built outside of Internal. The URL requires a specific customer_id to be passed through.

Configuring your Link Component

1. Add a Link component OR (to add in-line Links) open the configuration settings of your component, then click the “+” under “Fields” or “Columns” and choose component -> Link.

2. Configure your Link component:


  • Name this component: This is the name of the component. You’ll need this to reference it from other parts of the Space.
  • Provide a label for the field: The label is what appears next to the field (or the column header if you’re on a Table component)
  • Provide a URL template: Click on “Insert variables” to easily select the available variables in the Space.

            Example template: "https://example.com/users/${self.data.id}" 

  • Provide the text for your link: This is what appears in the actual field. You may want the link to say “View” or "User ${self.data.id}". To display the URL instead, you can leave this section blank. 
  • How should the link be opened? This setting configures whether the link opens up in a new window or in the same window. 

Visibility Rules

You can create visibility rules that will determine when this component is visible and able to be interacted with.


Link to another Space with a URL Parameter

Simply add ?{your URL Parameter}={value} to the URL of your Space.

For example, https://secure.internal.io/spaces/company_profile?company_id=1234 would send a user to the Space "Company Profile" where the URL Parameter "company_id" is equal to 1234.

Design

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.