Studio API reference

Studio

Main facade and API for extensions. Exposed as global variable Studio. It can be also imported from jsreport-studio when using extensions default webpack configuration

Kind: global class
Access: public

• Studio
  • .initializeListeners ⇒ Array.<function()>
  • .readyListeners ⇒ Array.<function()>
  • .runListeners ⇒ Array.<function()>
  • .reportPreviewStyleResolvers ⇒ Array.<function()>
  • .entityNewListeners ⇒ Array.<function()>
  • .entitySaveListeners ⇒ Array.<function()>
  • .templateEditorModeResolvers ⇒ Array.<function()>
  • .entityTreeIconResolvers ⇒ Array.<function()>
  • .entityTreeFilterItemResolvers ⇒ Array.<function()>
  • .entityTreeDropResolvers ⇒ Array.<function()>
  • .entityEditorComponentKeyResolvers ⇒ Array.<function()>
  • .locationResolver
  • .toolbarVisibilityResolver
  • .referencesLoader
  • .shouldOpenStartupPage
  • .removeHandler
  • .api ⇒ *
  • .entitySets ⇒ Array.<Object>
  • .extensions ⇒ Object
  • .engines ⇒ Array.<string>
  • .rootUrl ⇒ string
  • .TextEditor ⇒ TextEditor
  • .SplitPane ⇒ SplitPane
  • .Popover ⇒ Popover
  • .Popup ⇒ Popup
  • .EntityTree ⇒ EntityTree
  • .EntityTreeButton ⇒ EntityTreeButton
  • .MultiSelect ⇒ MultiSelect
  • .FileInput ⇒ MultiSelect
  • .EntityRefSelect ⇒ EntityRefSelect
  • .addEntitySet(entitySet)
  • .addToolbarComponent(toolbarComponent, position)
  • .addEntityTreeWrapperComponent(entityTreeWrapperComponent)
  • .addEntityTreeToolbarComponent(entityTreeToolbarComponent)
  • .addEntityTreeItemComponent(entityTreeItemComponent, position)
  • .addEntityTreeContextMenuItemsResolver(fn)
  • .addTabTitleComponent(key, component)
  • .addEditorComponent(key, component, reformat)
  • .addPropertiesComponent(string, component, shouldDisplay)
  • .addPreviewComponent(type, component, opts)
  • .addStartupComponent(startupComponent)
  • .setRequestHeader(key, value)
  • .preview(params)
  • .updatePreview(id, params)
  • .clearPreview()
  • .openModal(componentOrText, options)
  • .run()
  • .collapseEntity()
  • .collapseLeftPane()
  • .collapsePreviewPane()
  • .openTab(tab)
  • .openNewTab(tab)
  • .loadEntity(id, force) ⇒ Promise
  • .unloadEntity(id)
  • .addEntity(entity)
  • .updateEntity(entity)
  • .saveEntity(id) ⇒ Promise
  • .addExistingEntity(entity)
  • .replaceEntity(oldId, entity)
  • .removeEntity(id)
  • .startProgress()
  • .stopProgress()
  • .apiFailed(e, ignoreModal)
  • .updateHistory()
  • .reset()
  • .getCurrentTheme() ⇒ Array.<Object>
  • .getSettings() ⇒ Array.<Object>
  • .setSetting(key, value)
  • .getSettingValueByKey(key, shouldThrow)
  • .getEntityById(_id, shouldThrow) ⇒ Object | null
  • .getEntityByShortid(shortid, shouldThrow) ⇒ Object | null
  • .getActiveEntity() ⇒ Object
  • .getLastActiveTemplate() ⇒ Object | null
  • .getAllEntities() ⇒ Array.<Object>
  • .getTextEditor() ⇒ Object | null
  • .getReferences() ⇒ Array.<Object>
  • .resolveUrl(path) ⇒ String
  • .resolveEntityPath(entity) ⇒ String

studio.initializeListeners ⇒ Array.<function()>

Array of async functions invoked in sequence during initialization

Kind: instance property of Studio

studio.readyListeners ⇒ Array.<function()>

Array of async functions invoked in sequence after the app has been rendered

Kind: instance property of Studio

studio.runListeners ⇒ Array.<function()>

Array of async functions invoked in sequence when run template preview process starts.

Kind: instance property of Studio

studio.reportPreviewStyleResolvers ⇒ Array.<function()>

Array of functions invoked in sequence when a report preview is render. It should return an object describing the styles to apply to the Frame preview of the report

Kind: instance property of Studio

studio.entityNewListeners ⇒ Array.<function()>

Array of functions invoked in sequence when new entity is about to be added.

Kind: instance property of Studio

studio.entitySaveListeners ⇒ Array.<function()>

Array of async functions invoked in sequence when editor entity save starts.

Kind: instance property of Studio

studio.templateEditorModeResolvers ⇒ Array.<function()>

Array of functions used to resolve ace editor mode for template content. This is used by custom templating engines to add highlighting support for jade,ejs...

Kind: instance property of Studio

studio.entityTreeIconResolvers ⇒ Array.<function()>

Array of functions used to resolve entity icon in entity tree, function accepts entity and returns string like fa-cog

Kind: instance property of Studio

studio.entityTreeFilterItemResolvers ⇒ Array.<function()>

Array of functions used to resolve filtering in entity tree, function accepts entity, entitySets and filter info, should return boolean to determine if item should be skipped or not

Kind: instance property of Studio

studio.entityTreeDropResolvers ⇒ Array.<function()>

Array of functions used to resolve drop into entity tree

Kind: instance property of Studio

studio.entityEditorComponentKeyResolvers ⇒ Array.<function()>

Array of functions used to resolve entity editor component editor, function accepts entity and returns string represent the component editor key

Kind: instance property of Studio

studio.locationResolver

Sets the function returning the browser url path (defaultCalculatedPath, currentEntity) => String

Kind: instance property of Studio

Param	Type
fn	function

studio.toolbarVisibilityResolver

Set the function retunring the visibility flag for particular toolbar button ('Save All') => return true

Kind: instance property of Studio

Param	Type
fn	function

studio.referencesLoader

Override the default entities references loading with custom function (entitySet) => Promise([array])

Kind: instance property of Studio

Param	Type
fn	function

studio.shouldOpenStartupPage

Optionally you can avoid displaying default startup page

Kind: instance property of Studio

Param	Type
trueOrFalse	Boolean

studio.removeHandler

Override the default entity remove behavior (id) => {})

Kind: instance property of Studio

Param	Type
fn	function

studio.api ⇒ *

Provides methods get,patch,post,del for accessing jsreport server

Kind: instance property of Studio
Example

await Studio.api.patch('/odata/tasks', { data: { foo: '1' } })

studio.entitySets ⇒ Array.<Object>

Get registered entity sets, each one is object { visibleName: 'foo' }

Kind: instance property of Studio

studio.extensions ⇒ Object

Object[name] with registered extensions and its options

Kind: instance property of Studio

studio.engines ⇒ Array.<string>

Array of registeresd engines

Kind: instance property of Studio

studio.rootUrl ⇒ string

absolute root url to the server, like http://localhost/reporting

Kind: instance property of Studio

studio.TextEditor ⇒ TextEditor

Ace editor React wrapper

Kind: instance property of Studio
Example

export default class DataEditor extends TextEditor { ... }

studio.SplitPane ⇒ SplitPane

Component used to split content with sliders

Kind: instance property of Studio

studio.Popover ⇒ Popover

Component used to show content in a popover

Kind: instance property of Studio

studio.Popup ⇒ Popup

Component used to show content in a popup

Kind: instance property of Studio

studio.EntityTree ⇒ EntityTree

Component used to visualise entities

Kind: instance property of Studio

studio.EntityTreeButton ⇒ EntityTreeButton

Component used to add actions in EntityTree toolbar

Kind: instance property of Studio

studio.MultiSelect ⇒ MultiSelect

Component used for multi-select options

Kind: instance property of Studio

studio.FileInput ⇒ MultiSelect

Component used for file upload

Kind: instance property of Studio

studio.EntityRefSelect ⇒ EntityRefSelect

Component used to select entity refs

Kind: instance property of Studio

studio.addEntitySet(entitySet)

Add new entity set, which will be automatically loaded through OData and displayed in the entity tree

Kind: instance method of Studio

Param	Type
entitySet	Object

Example

Studio.addEntitySet({ name: 'data', visibleName: 'sample data' })

studio.addToolbarComponent(toolbarComponent, position)

Add React component which will be displayed in toolbar

Kind: instance method of Studio

Param	Type	Default	Description
toolbarComponent	ReactComponent \	function
position	String	left	left, right, settings or settingsBottom

studio.addEntityTreeWrapperComponent(entityTreeWrapperComponent)

Add React component which will be displayed as a wrapper/container for entity tree

Kind: instance method of Studio

Param	Type
entityTreeWrapperComponent	ReactComponent \	function

studio.addEntityTreeToolbarComponent(entityTreeToolbarComponent)

Add React component which will be displayed in toolbar of entity tree

Kind: instance method of Studio

Param	Type
entityTreeToolbarComponent	ReactComponent \	function

studio.addEntityTreeItemComponent(entityTreeItemComponent, position)

Add React component which will be displayed when rendering an item of entity tree

Kind: instance method of Studio

Param	Type	Default	Description
entityTreeItemComponent	ReactComponent \	function
position	String	right	right, groupRight or container

studio.addEntityTreeContextMenuItemsResolver(fn)

Add a fn to resolve items for the context menu at Entity Tree

Kind: instance method of Studio

Param	Type
fn	function

studio.addTabTitleComponent(key, component)

Add React component which will be used as tab title

Kind: instance method of Studio

Param	Type	Description
key	String	used in openTab
component	ReactComponent \	function

studio.addEditorComponent(key, component, reformat)

Add component used in tab as content editor

Kind: instance method of Studio

Param	Type	Description
key	String	key used in openTab({ editorComponentKey: ... , use entity set name if the editor should represent the main entity editor
component	ReactComponent \	function
reformat	function	function handling reformatting code

studio.addPropertiesComponent(string, component, shouldDisplay)

Add component used in the left Properties section

Kind: instance method of Studio

Param	Type	Description
string	function \	String	or title function used to render the section title
component	ReactComponent \	function
shouldDisplay	function

studio.addPreviewComponent(type, component, opts)

Add component used in the MainPreview section

Kind: instance method of Studio

Param	Type	Description
type	String	name of the new type of content that is going to display in MainPreview
component	ReactComponent	the component that is responsible of rendering the new type of content
opts	Object	options related to the presence of elements in the MainPreview title bar (tabs, actions, defaultActiveTab)

studio.addStartupComponent(startupComponent)

Add component displayed at the startup page top

Kind: instance method of Studio

Param	Type
startupComponent	ReactComponent \	function

studio.setRequestHeader(key, value)

Set additional custom header to all api calls

Kind: instance method of Studio

Param	Type
key	String
value	String

studio.preview(params)

Render new content/data inside the MainPreview of studio

Kind: instance method of Studio

Param	Type	Description
params	Object	metadata about the preview

studio.updatePreview(id, params)

Updates the content/data inside the MainPreview of studio

Kind: instance method of Studio

Param	Type	Description
id	String	Preview id of the content to update
params	Object	new metadata about the preview to update

studio.clearPreview()

Cleans the content inside the MainPreview of studio

Kind: instance method of Studio

studio.openModal(componentOrText, options)

Opens modal dialog.

Kind: instance method of Studio

Param	Type	Description
componentOrText	ReactComponent \	String
options	Object	passed as props to the react component

studio.run()

Invokes run template preview process, when no template is passed it is invoked for the last active template

Kind: instance method of Studio

studio.collapseEntity()

Collapse entity in EntityTree

Kind: instance method of Studio

studio.collapseLeftPane()

Collapse left pane

Kind: instance method of Studio

studio.collapsePreviewPane()

Collapse preview pane

Kind: instance method of Studio

studio.openTab(tab)

Open and activate new editor tab

Kind: instance method of Studio

Param	Type
tab	Object

Example

// open entity editor
Studio.openTab({ _id: 'myentityid' })
// open custom page
Studio.openTab({ key: 'StartupPage', editorComponentKey: 'startup', title: 'Statup' })

studio.openNewTab(tab)

Open tab for a new entity

Kind: instance method of Studio

Param	Type
tab	Object

Example

// open entity editor
Studio.openTab({ entitySet, entity, name })

studio.loadEntity(id, force) ⇒ Promise

Loads entity, which reference is already present in the ui state, from the remote API

Kind: instance method of Studio

Param	Type	Default
id	String
force	Boolean	false

studio.unloadEntity(id)

Remove the additional entity properties from the state, keep just meta and id

Kind: instance method of Studio

Param	Type
id	String

studio.addEntity(entity)

Add entity to the state

Kind: instance method of Studio

Param	Type
entity	Object

studio.updateEntity(entity)

Update entity in the state

Kind: instance method of Studio

Param	Type
entity	Object

studio.saveEntity(id) ⇒ Promise

Call remote API and persist (insert or update) entity

Kind: instance method of Studio

Param	Type
id	String

studio.addExistingEntity(entity)

Adds already existing (persisted) entity into the UI state

Kind: instance method of Studio

Param
entity

studio.replaceEntity(oldId, entity)

Replace the existing entity in the state

Kind: instance method of Studio

Param	Type
oldId	String
entity	Object

studio.removeEntity(id)

Remove entity from the state

Kind: instance method of Studio

Param	Type
id	String

studio.startProgress()

Show ui signalization for running background operation

Kind: instance method of Studio

studio.stopProgress()

Hide ui signalization for running background operation

Kind: instance method of Studio

studio.apiFailed(e, ignoreModal)

Emits an error that shows the message in a modal

Kind: instance method of Studio

Param	Type	Description
e	Error
ignoreModal	Boolean	defaults to false

studio.updateHistory()

Synchronize the location with history

Kind: instance method of Studio

studio.reset()

Clear the current state and reload internally studio

Kind: instance method of Studio

studio.getCurrentTheme() ⇒ Array.<Object>

Get the current theme (it will check localstorage for user preference and fallback to the default theme configured)

Kind: instance method of Studio

studio.getSettings() ⇒ Array.<Object>

Get all settings from state

Kind: instance method of Studio

studio.setSetting(key, value)

Save one setting in state and persist it on the server

Kind: instance method of Studio

Param	Type
key	String
value	Object

studio.getSettingValueByKey(key, shouldThrow)

Get one setting value from the state

Kind: instance method of Studio

Param	Type	Default
key	String
shouldThrow	Boolean	true

studio.getEntityById(_id, shouldThrow) ⇒ Object | null

Searches for the entity in the UI state based on specified _id

Kind: instance method of Studio

Param	Type	Default
_id	String
shouldThrow	Boolean	true

studio.getEntityByShortid(shortid, shouldThrow) ⇒ Object | null

Searches for the entity in the UI state based on specified shortid

Kind: instance method of Studio

Param	Type	Default
shortid	String
shouldThrow	Boolean	true

studio.getActiveEntity() ⇒ Object

Returns the currently selected entity or null

Kind: instance method of Studio

studio.getLastActiveTemplate() ⇒ Object | null

Returns last active entity

Kind: instance method of Studio

studio.getAllEntities() ⇒ Array.<Object>

Get all entities including meta attributes in array

Kind: instance method of Studio

studio.getTextEditor() ⇒ Object | null

If exists get a text editor instance of an opened text editor by name

Kind: instance method of Studio

studio.getReferences() ⇒ Array.<Object>

Get references to entities

Kind: instance method of Studio

studio.resolveUrl(path) ⇒ String

Get the path in absolute form like /api/images and make it working also for jsreport running on subpath like myserver.com/reporting/api/images

Kind: instance method of Studio

Param	Type
path	String

studio.resolveEntityPath(entity) ⇒ String

Assemble entity absolute path

Kind: instance method of Studio

Param	Type
entity	*