Send intents

Intents provide a way to extend your Dynatrace app's functionality. Part of that process is to send intents from your app to the receiving app. You might want to send an intent for several reasons, such as:

• Pin a chart to a dashboard
• View details of an app in the Dynatrace Hub

When you send an intent, the App Shell displays an Open with dialog to let you choose the app that will receive the intent.

This guide shows you how to define and trigger a send intent from your app. Before you start, familiarize yourself with the intents mechanism and its processes.

Time to complete: 10 minutes

1. Define the intent

First, you need to define the intent payload. An intent payload is a set of key-value pairs that contains information you want to share.

Define the intent payload using the IntentPayload type from @dynatrace-sdk/navigation as follows:

import { IntentPayload } from '@dynatrace-sdk/navigation';

// Intent payload definition
const intent: IntentPayload = {
  'dt.query': 'fetch logs',
  'custom.type': { foo: 'bar' },
};

2. Trigger the intent

You can trigger the intent from your app in one of three ways, using the:

• <IntentButton> option
• sendIntent method
• getIntentLink method

The <IntentButton> option

Use the <IntentButton> for straightforward use cases where you want to trigger a declarative intent.

Execute the <IntentButton> from @dynatrace/strato-components-preview as follows:

src/app/App.tsx

import React from 'react';
import { IntentButton } from '@dynatrace/strato-components-preview';

export const App = () => {
  return <IntentButton payload={{ 'dt.query': 'fetch logs' }} />;
};

The sendIntent method

Use the sendIntent method if you need more control than the <IntentButton> provides to trigger an intent from the @dynatrace-sdk/navigation programmatically. The sendIntent method takes an intentPayload and optional recommendedAppId and recommendedIntentId parameters.

Send an intent with the dt.query property using the sendIntent method as follows:

import { sendIntent, IntentPayload } from '@dynatrace-sdk/navigation';

const payload: IntentPayload = {
  'dt.query': 'fetch logs',
};

sendIntent(payload);

Note

If you provide a non-existent recommendedAppId, the app shell will display the Open with dialog box, allowing you to select a different app. Provide an existing recommendedAppId and recommendedIntentId to bypass the Open with dialog and open the app directly.

The getIntentLink method

Use the getIntentLink method to create a static URL link that users can copy, share, and bookmark in their browser. The getIntentLink method takes an intentPayload and optional appId and intentId parameters.

Create a static URL link using the getIntentLink method from @dynatrace-sdk/navigation as shown below. This example shows how an app renders a URL using getIntentLink.

import React from 'react';
import { getIntentLink } from '@dynatrace-sdk/navigation';
import { Link } from '@dynatrace/strato-components-preview';

export const YourComponent = () => {
  const intentLink = getIntentLink({ 'dt.query': 'fetch logs' });

  return (
    <Link href={intentLink} target="_blank">
      Intent Link
    </Link>
  );
};

Note

If you provide a non-existent appId, the app shell will display the Open with dialog box, allowing you to select a different app. Provide an existing appId and intentId to bypass the Open with dialog and open the app directly.

Now, you have integrated the user flow from your app to other Dynatrace Apps by sending an intent.

Learn more

If you want to learn more about extending your Dynatrace app using intents, check out the Receive and Debug intent pages.