magicapp-pico (widgets)

Modified on Wed, 1 Apr at 5:56 AM

Overview

The magicapp-pico component displays PICO (Population, Intervention, Comparison, Outcome) information for clinical questions. This includes outcomes, summary of findings, references, and graphical representations. This component uses the same production code as the MAGICapp interface.

Installation

Add the script tag to your page's <head> section:

<script src="https://app.magicapp.org/widget/picoComponent.js" type="module"></script>

Basic Usage

HTML Markup

Add the component directly in your HTML:

<magicapp-pico 
  guideline="guideline-short-code" 
  pico="pico-id">
</magicapp-pico>

JavaScript

Create and append the component dynamically:

const picoComponent = document.createElement('magicapp-pico');
picoComponent.setAttribute('guideline', 'guideline-short-code');
picoComponent.setAttribute('pico', 'pico-id');
document.getElementById('container').appendChild(picoComponent);

Component Attributes

Attribute	Type	Required	Dynamic Updates	Description
`guideline`	string	Yes	No	Guideline short code or ID
`pico`	string	Yes	Yes	PICO ID or short code. Using short code loads the latest published version
`lang`	string	No	Yes	Force specific locale (e.g., `en`, `es`, `fr`). Overrides browser language settings
`meta`	boolean	No	Yes	Set to `"true"` to show guideline title, version, and section information
`org`	boolean	No	Yes	Set to `"true"` to display organization logo, name, and publish date
`tab`	string	No	Yes	Default tab to open on load. Options: `outcome`, `gfxOutcome`, `summary`, `reference`
`env`	string	No	No	Environment setting. Use `"test"` for test environment, omit for production

Attribute Notes

Guideline & PICO IDs: Both must use the same identifier type (either both short codes or both IDs)
Dynamic Updates: Attributes marked "Yes" can be changed after the component loads and will trigger a re-render
Boolean Attributes: Use string "true" to enable (e.g., meta="true")

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PICO Widget Example</title>
  <script src="https://app.magicapp.org/widget/picoComponent.js" type="module"></script>
</head>
<body>
  <h1>Clinical Question PICO</h1>
  
  <!-- Full-featured PICO display -->
  <magicapp-pico 
    guideline="jW0XmL" 
    pico="LA6rw6"
    lang="en"
    meta="true"
    org="true"
    tab="outcome">
  </magicapp-pico>
  
  <!-- Minimal PICO display -->
  <magicapp-pico 
    guideline="jW0XmL" 
    pico="115861">
  </magicapp-pico>
</body>
</html>

Using with Authentication

For authenticated API access, nest the component inside magicapp-connect:

<script src="https://app.magicapp.org/widget/apiBuilder.js" type="module"></script>
<script src="https://app.magicapp.org/widget/connectServiceComponent.js" type="module"></script>
<script src="https://app.magicapp.org/widget/picoComponent.js" type="module"></script>

<magicapp-connect client-id="your-client-id">
  <!-- Automatically uses parent's authentication -->
  <magicapp-pico 
    guideline="jW0XmL" 
    pico="LA6rw6"
    meta="true"
    org="true"
    tab="outcome">
  </magicapp-pico>
</magicapp-connect>

Tab Options

The tab attribute controls which section is displayed when the component loads:

Tab Value	Description
`outcome`	Outcomes’ table showing all measured outcomes
`gfxOutcome`	Graphical representation of outcomes (forest plots, etc.)
`summary`	The Summary of Findings table
`reference`	References and citations

Note: The "Practical issues and findings" section does not currently have a tab key.

Using as an iFrame

You can also embed PICO information using an iframe with URL parameters.

iFrame URL Format

https://app.magicapp.org/widget/pico/?gId={GUIDELINE_ID}&picoId={PICO_ID}&tab={TAB}&org=1&m=1

URL Parameters

Parameter	Values	Description
`gId`	string	Guideline short code or ID
`picoId`	string	PICO ID or short code
`tab`	`outcome`, `gfxOutcome`, `summary`, `reference`	Which tab to display
`org`	`1`	Show organization name, logo, and publish date
`m`	`1`	Show guideline metadata (title, version, section)
`lang`	locale code	Force specific language (e.g., `en`, `es`)

iFrame Examples

The latest published version with the outcomes’ table:

<iframe 
  src="https://app.magicapp.org/widget/pico/?gId=jW0XmL&picoId=LA6rw6&tab=outcome&org=1&m=1"
  width="100%" 
  height="600" 
  frameborder="0">
</iframe>

Specific PICO ID with the summary of findings:

<iframe 
  src="https://app.magicapp.org/widget/pico/?gId=jW0XmL&picoId=115861&tab=summary&org=1&m=1"
  width="100%" 
  height="600" 
  frameborder="0">
</iframe>

Graphical outcomes display:

<iframe 
  src="https://app.magicapp.org/widget/pico/?gId=jW0XmL&picoId=LA6rw6&tab=gfxOutcome"
  width="100%" 
  height="600" 
  frameborder="0">
</iframe>

Minimal display (no metadata):

<iframe 
  src="https://app.magicapp.org/widget/pico/?gId=jW0XmL&picoId=LA6rw6"
  width="100%" 
  height="400" 
  frameborder="0">
</iframe>

Dynamic Updates

You can change certain attributes after the component has loaded to update the display:

const pico = document.querySelector('magicapp-pico');

// Switch to a different PICO
pico.setAttribute('pico', 'new-pico-id');

// Change the active tab
pico.setAttribute('tab', 'summary');

// Change language
pico.setAttribute('lang', 'es');

// Toggle metadata display
pico.setAttribute('meta', 'true');

Test Environment

To use the test environment, add the env attribute:

<magicapp-pico 
  guideline="test-guideline" 
  pico="test-pico-id"
  env="test">
</magicapp-pico>

Or for iFrame:

https://app-test.magicapp.org/widget/pico/?gId=testGuideline&picoId=testPico

Understanding PICO Components

Population (P)

The patient population or problem being addressed in the clinical question.

Intervention (I)

The treatment, diagnostic test, or exposure being evaluated.

Comparison (C)

The alternative intervention, placebo, or standard of care being compared against.

Outcome (O)

The clinical outcomes measured (mortality, quality of life, adverse events, etc.).

Browser Compatibility

Chrome/Edge 80+
Firefox 75+
Safari 13.1+
Opera 67+

Requires support for ES6 modules, Custom Elements, and Shadow DOM.

Troubleshooting

Component is not rendering

Verify the script is loaded with type="module"
Check that guideline and PICO IDs are valid
Open the browser console for error messages

Wrong language displaying

Set explicit lang attribute to override browser settings
Ensure the locale code is supported by MAGICapp

Content not updating

Only attributes marked "Dynamic Updates: Yes" can be changed after load
Changing guideline requires page reload

Tab not displaying

Verify the tab key is correct: outcome, gfxOutcome, summary, or reference
Some PICOs may not have all tabs available depending on content

Differences from Recommendation Widget

Focus: PICO displays evidence and outcomes; Recommendation displays clinical guidance
Tabs: Different tab options focused on evidence presentation
Use Case: PICO is for evidence review; Recommendation is for clinical decision support
No link-back attribute: PICO doesn't support the link-back attribute

Support

Email: api-support@magicapp.org
Documentation: https://docs.magicapp.org
Examples: https://magicevidence.org/widget-demo