InstanceLink

Reference

• The InstanceLink component is Creates a link to a specific resource instance based on the provided typeName, instanceId, and targetLayout.
• Supports opening the link in a new tab or the same tab.
• Optionally displays a "pop-out" icon (external link icon) next to the link.
• Allows for custom styling of the link and its container.

Props

1. children

   • Type: ReactNode
   • Description: The content to be displayed inside the link (e.g., text or other components).
   • Example: "View Details" or <span>Instance Name</span>.

2. typeName

   • Type: string
   • Description: The type of the resource (e.g., "user", "project"). Used to construct the route path.

3. instanceId

   • Type: string
   • Description: The unique identifier of the resource instance. Used to construct the route path.

4. targetLayout

   • Type: string
   • Description: Specifies the layout or view type for the resource (e.g., "details", "edit"). Used to construct the route path.

5. canCreateInstance

   • Type: boolean
   • Description: Indicates whether the user has permission to create a new instance. Passed as part of the route's state.

6. containerStyle

   • Type: object
   • Description: Custom styles for the container <Box> wrapping the link.

7. openInNewTab

   • Type: boolean
   • Default: false
   • Description: If true, the link opens in a new tab using the PopOutLink component.

8. showPopOutIcon

   • Type: boolean
   • Default: false
   • Description: If true, displays a FontAwesome external link icon (faExternalLinkAlt) next to the link.

9. contentStyle

   • Type: object
   • Default: {}
   • Description: Custom styles for the link content.

Usage Example

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { InstanceLink } = protrakComponents;

  return (
   <InstanceLink
      typeName="project"
      instanceId="12345"
      targetLayout="details"
      canCreateInstance={true}
      containerStyle={{ margin: '10px' }}
      openInNewTab={true}
      showPopOutIcon={true}
      contentStyle={{ fontWeight: 'bold' }}
>
  View Project
</InstanceLink>
  );
}

• This renders a link to /project/details/12345.
• The link opens in a new tab.
• A pop-out icon is displayed next to the link.
• Custom styles are applied to the container and link content.