Codex utils

Introduction

To make the plugin development easier, Codex offers a toolkit of utilities that you can reuse to make the user experience seamless across the whole platform, even if they are using external plugins.

Since Codex plugins are integrated natively into the platform, you already have access to reuse any existing component or function in your plugins.

In this section, we will present some of the most valuable utilities in Codex that you can use in your plugins.

GjIcon

GjIcon is a component that displays icons in Codex. It contains a set of 400+ Gjirafa icons and 2000+ external icons. You can reuse any of these icons through GjIcon component in your plugins. Here are some examples how to use the GjIcon component in your plugins

info

You can find the complete list of icons here.

The most simple use case

<GjIcon  name="Close" />

You can specify the size of the icon

<GjIcon  name="DoubleArrow" size="22" />

You can specify the class of the icon

<GjIcon  name="File" class="entity-metadata__image-empty-icon" />

You can specify the style of the icon

<GjIcon  name="File" style="color: #052D61; margin-top: -2px" />

You can specify event listeners for the icon

<GjIcon  
  name="File" 
  style="color: #052D61; margin-top: -2px"
  @click="onFileClick" 
/>

Codex image

CodexImage is a component for rendering images in Codex. It contains a set of utilities which makes loading Codex assets easier through different pages. When using Codex assets you can just pass the asset id as a property and CodexImage component will load the image in the necessary format.

<CodexImage :id="asset.id" />

You can specify the alt attribute of the image

<CodexImage :id="asset.id" :alt="asset.alt" />

Confirm popup

Confirm popup is a popup you can reuse to get confirmation from the user for a specific action they are performing.

To use the confirm popup, first inject it into your component:

MyComponent.vue

<script>

export default {
  name: 'MyComponent'
  inject: ['showConfirmPopup']
}
</script>

Now you can use the showConfirmPopup anywhere inside your component for user confirmation. The method returns a boolean value whether the user has confirmed or not the popup.

const result = this.showConfirmPopup()

You can also send arguments to customize the content of the confirm popup. Possible arguments are:

title

A string that represent the title of the popup.

description

A string that represents the description of the popup.

helperText

A string that represents the helper text of the popup.

okTitle

A string that represent the title for the Ok button.

okVariant

A string that represents the style of the button based on Bootstrap Vue (for example: primary).

cancelTitle

A string that represents the title for the Cancel button.

cancelVariant

A string that represents the style of the button based on Bootstrap Vue (for example: primary).

okOnly

A boolean that represents if the confrim poup should display only the Ok button.

You need to pass these arguments as part of an object.

const result = this.showConfirmPopup({ 
  title: 'Delete component', 
  description: 'Are you sure you want to delete this component?'
  helperText: 'This action cannot be reversed!',
  okTitle: 'Yes',
  okVariant: 'primary',
  cancelTitle: 'No'
})

Entries popup

Entries popup is a popup that you can reuse to allow users to choose entries from multiple models in Codex and place them into your components.

Inject it into your component

MyComponent.vue

<script>

export default {
  name: 'MyComponent'
  inject: ['showBrowseEntriesPopup']
}
</script>

And then use it anywhere in your component

const entries = this.showBrowseEntriesPopup()

You can also send arguments to customize the content of the confirm popup. Possible arguments are:

Coming soon.

The entries object contains an array of entires.

Assets Popup

Assets popup is a popup that you can reuse to allow users to choose images, videos, or other assets in Codex and place them into your components.

Inject it into your component

MyComponent.vue

<script>

export default {
  name: 'MyComponent'
  inject: ['showAssetManagementHubPopup']
}
</script>

And then use it anywhere in your component

const assets = this.showAssetManagementHubPopup()

The assets object contains an array of assets.

Possible arguments for the popup are:

limit

An integer that limits the number of assets that can be selected.

selectedAssets

An array of objects that will show the assets that are already selected in the Popup.

exluded

A string or array of strings which exludes displayed articles with the id or array of ids sent in the parameter.

You need to pass these arguments as part of an object.

const assets = this.showAssetManagementHubPopup({ 
  limit: 3, 
  selectedAssets: [],
  exluded: ['id_1', 'id_2']
})

Sections popup

Sections popup is a popup that you can reuse to allow users to choose sections in Codex and place them into your components.

Inject it into your component

MyComponent.vue

<script>

export default {
  name: 'MyComponent'
  inject: ['showBrowseSectionsPopup']
}
</script>

And then use it anywhere in your component

const sections = this.showBrowseSectionsPopup()

The sections object contains an array of sections.