Shared Components for App Developers

Use the Popup component when you need to surface a brief informational message to the user without navigating away from the current page. The component renders a simple modal dialog with a title and a text message.

MiNamespace.render({
  "component": "popup",
  "props": {
    "title": "Info",
    "text": "Message"
  }
});

Use the Lineage component to help users understand where data comes from. The component opens a popup showing the data lineage graph for an Element or external report, making it easy to trace data origins without leaving the page.

MiNamespace.render({
  "component": "lineage",
  "props": {
    "id": 40,
    "type": "external report"
  }
});

Use this component when you need to inform a user that they do not have access to a specific element and Dimension combination. It renders an access denied message in a popup, making it easy to surface permission boundaries without redirecting the user away from the current page.

MiNamespace.render({
  "component": "access_denied_popup",
  "props": {
    "element_id": 53,
    "segment_value_id": 0
  }
});

Use this component when you want to surface glossary term definitions inline, without navigating the user away from the current context. The popup can display a single term or multiple terms at once, making it useful for annotating dashboards or reports with business definitions.

MiNamespace.render({
  "component": "glossary_term_popup",
  "props": {
    "topicId": 53,
    "topicIds": [53, 18, 23, 212]
  }
});

Use this component when you want to embed an Element preview popup in a custom interface. You can control which UI elements are visible and intercept title or image click events to wire in your own navigation or interaction logic. This gives you fine-grained control over how the preview behaves within your application.

MiNamespace.render({
  "component": "preview",
  "props": {
    "element": 20,
    "segment": 0,
    "custom_events": {
      "preview": {
        "title_click": true,
        "image_click": true
      }
    },
    "visibility": {
      "preview": {
        "header": false,
        "title": false,
        "control_buttons": {
          "lineage": false,
          "favorite": false,
          "share": false,
          "download": false,
          "notification": false,
          "edit": false,
          "bookmark": false
        }
      }
    }
  }
});

Use this component to open a feedback prompt that lets users submit feedback for either an App (identified by Name used in URL) or an Element (identified by ID). This is useful when you want to collect user input at a specific point in your embedded experience.

// For an element:
MiNamespace.render({
  "component": "feedback_prompt",
  "props": {
    "itemType": "element",
    "itemId": 42
  }
});

// For a portal page:
MiNamespace.render({
  "component": "feedback_prompt",
  "props": {
    "itemType": "page",
    "itemId": "how-to"
  }
});

Use this component to embed an AI-powered chat assistant panel directly in your App. Initialize the panel once using MiNamespace.render(), then control its visibility and behavior by dispatching CustomEvents, giving you full programmatic control over when and how the assistant appears.

MiNamespace.render({
  "component": "concierge",
  "props": {
    "title": "Ask MI",
    "description": "How can I help you today?",
    "suggested_prompts": [
      "Show me top KPIs",
      "What are trending metrics?"
    ],
    "show_source_selector": true,
    "display_model_name": true,
    "show_search_request": true,
    "include_help_docs": true,
    "include_glossary_terms": true,
    "include_custom_faq": true,
    "load_more": true
  }
});

Use the Element Viewer to embed a chart, table, or report inline within a container <div> on the page. The component gives you granular control over all UI chrome and supports custom event interception.

Use the Search component when you want to embed a full-featured search interface directly inside a container element on your page. As users type queries and apply filters, the component continuously syncs the current search state to a hidden <input> field as a JSON string, making it straightforward to read the current state or pre-populate the interface programmatically before rendering.