Explorer

Status	stable
Published	5.2.0

Use Explorer when you're presenting a bunch of entities as options to the end user, and you expect them to make pick some items within it; for example, an asset picker, or selecting users from a list.

Example

<jds-explorer ref="explorerEl">
    <template #title>Large content</template>
    <p> It makes a lot of sense for large entities such as diagrams or tables for summary to take advantage of the extra space.</p>
    
    <jds-table>
        <jds-table-row>
            <jds-table-heading>Name</jds-table-heading>
            <jds-table-heading>Request</jds-table-heading>
            <jds-table-heading>Status</jds-table-heading>
            <jds-table-heading>Last updated</jds-table-heading>
            <jds-table-heading>Deadline</jds-table-heading>
        </jds-table-row>
        <jds-table-row>
            <jds-table-cell primary>Mechanic</jds-table-cell>
            <jds-table-cell><jds-timestamp time="2021-05-20T06:41:03+0000" /><br><small>by Suvi</small></jds-table-cell>
            <jds-table-cell>Request pending</jds-table-cell>
            <jds-table-cell><jds-timestamp time="2021-05-22T06:41:03+0000" /></jds-table-cell>
            <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /></jds-table-cell>
        </jds-table-row>
        <jds-table-row>
            <jds-table-cell primary>Mechanic</jds-table-cell>
            <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /><br><small>by Pia</small></jds-table-cell>
            <jds-table-cell>Pipeline: In Production</jds-table-cell>
            <jds-table-cell><jds-timestamp time="2021-05-22T06:41:03+0000" /></jds-table-cell>
            <jds-table-cell><jds-timestamp time="2021-05-25T06:41:03+0000" /></jds-table-cell>
        </jds-table-row>
    </jds-table>

    <template #toolbar="{close, cancel}">
        <jds-button @click="close" type="primary">Send</jds-button>
        <jds-button @click="cancel">Cancel</jds-button>
    </template>
</jds-explorer>
<jds-button @click="open">Open Explorer</jds-button>

JdsExplorer

Props

Prop	Value	Default
icon	`string`	none

Methods

Method	Parameters
open	-	Open this explorer.
close	-	Close this explorer, after executing its function.
cancel	-	Cancel this explorer, marking it as incomplete.

Slots

Slot

title Required

Main title of this explorer.

help

Optional smaller help text to explain the purpose of this entity.

default

Main content of this inspector.

toolbar

Binding	Type
cancel
close

Analytics Events

Event

jds.explorer:cancel

Fired on user-initiated explorer canceling.

Parameter
trigger	Either `backdrop` or `button`, which the user clicked on to cancel this explorer. Backdrop also includes the escape key.
duration	How long, in milliseconds, the explorer stayed open.

Analytics Props

Prop	Value	Default
track	`string`	(Empty string)	A way to identify this instance of this component's usage within the app. For example, `track="jobilla.ats.candidate.send-email"` will identify this butt as the Jobilla ATS candidate email sending button. If no `track` is set, events on a particular component instance will not emit analytics.
trackResource	`string`	none	If you can identify this particular instance of the component, for example the candidate ID which you're looking at right now, you can attach this to further identify the analytics events. Completely optional.