Send intents

You might want to send an intent for many reasons, for example:

• To pin a chart to a Dashboard
• To view details of an app in the Hub

When you send an intent, the App Shell opens an Open with dialog that will let you choose the app to consume it. To do so, you need to perform the following steps:

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. To define an intent payload, you can use 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' },
};

Trigger intent

Second, you need to trigger the intent from your app. There are three ways to trigger an intent:

• Using the <IntentButton>
• Using the sendIntent method
• Using the getIntentLink method

a. The <IntentButton>

If you want to trigger an intent declaratively, you can use 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' }} />;
};

b. The sendIntent method

The <IntentButton> is handy for the most straightforward use cases. But if you need more control, you can trigger an intent programmatically by using the sendIntent method from @dynatrace-sdk/navigation. The sendIntent method takes an intentPayload and optional recommendedAppId and recommendedIntentId parameters.

Note

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

Following is an example where you send an intent with the dt.query property using the sendIntent method:

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

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

sendIntent(payload);

c. The getIntentLink method

You can also create a static link that users can copy, share, and bookmark in the browser. To create a static link, use the getIntentLink method from @dynatrace-sdk/navigation. The getIntentLink method takes an intentPayload and optional appId and intentId parameters.

Note

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

Here is an example where 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>
  );
};