# Card

## About

Returns a component that has a Card design with a predefined look and an ability to change some parts of it

<div align="left"><img src="/files/-LozLvjr84z_j-sYkILt" alt="Example of a card rendered with a specific style config."></div>

The card portal has a main part that is not so configurable with a headline, subheadline and an image part. In order to not render subheadline or images, just don't send any values in to these.

Header and footer part is totally up the plugin requiring the portal to handle. Here you are able to render what ever suits your needs.

## How to use

First of you need to register a requirement for your plugin to use a portal, you can read more about it [here.](https://app.gitbook.com/@infomaker/s/dashboard-plugin/register/requirements#portals)

{% tabs %}
{% tab title="Hook component" %}

```javascript
import { usePortal, getMappedId } from 'Dashboard'
import { useEffect, createElement, useRef } from 'react'

const MyComponent = props => {
    const CardRef = useRef()
    
    useEffect(() => {
         CardRef.current = usePortal(getMappedId('@plugin_bundle', 'portal', 'MY_CARD_PORTAL_ID'))
    }, [])
    
    const Card = CardRef.current && createElement(CardRef.current, {
        title: 'title string'
        dragData: {'fizz': 'buzz'}
        onClick: () => console.log('clicked')
        striped: true
        displayStatusBar: true
        styleObject: {
            borderColor: 'red',
            backgroundColor: 'purple',
            textColor: 'black',
            font: 'Lato'
        }
        headline: 'My card headline'
        subheadline: 'My card subheadline'
        images: [
            "https://src-to-my-image.png",
            "https://src-to-my-second-image.jpg"
        ]
        headerContent: {<div>Render whatever component you want</div>}
        footerContent: {<span>Same goes here...</span>}
        imageMaxWidth: 70
        imageMaxHeight: 40
    })
    
    return Card || null
}
```

{% endtab %}

{% tab title="Class component" %}

```javascript
import { Component } from 'react'
import { usePortal, getMappedId } from 'Dashboard'

class MyClass extends Component {
    constructor(props) {
        super(props)
        
        this.card = null
    }    

    componentDidMount() {
        //here we need to get the mapped function that returnes the Card component
        this.card = usePortal(getMappedId('@plugin_bundle', 'portal', 'MY_CARD_PORTAL_ID'))    
    }
    
    render() {
        const Card = this.card
    
        // render the card if its a valid component
        return (
            {Card && 
                <Card 
                    title={'title string'}
                    dragData={{'fizz': 'buzz'}}
                    onClick={() => console.log('clicked')}
                    striped={true}
                    displayStatusBar={true}
                    styleObject={{
                        borderColor: 'red',
                        backgroundColor: 'purple',
                        textColor: 'black',
                        font: 'Lato'
                    }}
                    headline={'My card headline'}
                    subheadline={'My card subheadline'}
                    images={[
                        "https://src-to-my-image.png",
                        "https://src-to-my-second-image.jpg"
                    ]}
                    headerContent={<div>Render whatever component you want</div>}
                    footerContent={<span>Same goes here...</span>}
                    imageMaxWidth={70}
                    imageMaxHeight={40}
                />  
            }
        )
    }
}
```

{% endtab %}

{% tab title="index.js" %}

```javascript
import { register } from 'Dashboard'

(() => {
    register({
        bundle: "@plugin_bundle",

        application: MyApplication,
        settings: MySettings,

        requirements: {
            actions: [],
            portals: [
                {
                    id: 'MY_CARD_PORTAL_ID',
                    name: 'Card portal',
                    description: 'A portal to render a card with information',
                }
            ]
        }
    })
})()
```

{% endtab %}
{% endtabs %}

| Property             | Description                                                                                                                                  | Default |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| **title**            | Value to use in title attribute on element                                                                                                   |         |
| **dragData**         | Object containing data that will be able to be parsed on drag and drop, if this is passed the cards will get draggable attribute set to true |         |
| **onClick**          | A function that will get triggered when a click occurs on the card                                                                           |         |
| **striped**          | If the status bar will have a striped look                                                                                                   | false   |
| **displayStatusBar** | If the card should display a status bar to the left or not                                                                                   | false   |
| **styleObject**      | A object containing a style scheme for the card                                                                                              | object  |
| **headline**         | The headline of the card                                                                                                                     |         |
| **subheadline**      | The subheadline fo the card                                                                                                                  |         |
| **images**           | An array containing image sources                                                                                                            |         |
| **headerContent**    | A valid react element to render in the header part                                                                                           |         |
| **footerContent**    | A valid react element to render in the footer part                                                                                           |         |
| **imageMaxWidth**    | An integer representing the max width the image can have                                                                                     |         |
| **imageMaxHeight**   | An integer representing the max height the image can have                                                                                    |         |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.navigaglobal.com/dashboard-utility-agent/developers/portals/card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.