Dynamic Parameters

Warning

Rework pending, no delivery date. The Front App SDK (ReactJS) and the Front API SDK (NodeJS) are both being replaced. This page documents the current release, remains accurate, and is maintained until the replacement ships. Code written against it keeps working.

Dynamic parameters enables your end-users to select values which are passed on to Charts to be filtered on and refreshed.

Dynamic Parameters values are applied to Chart requests at the Front API level via Analytics Manager Transformers. You may extend default Transformers to your own needs.

For specific display needs, it is also possible to create custom Dynamic Parameters.

List of available Dynamic Parameters

name	description
selectbox	Select from a list, one or more items
checkbox	Select from checkboxes one or more items
radio	Selects an item through a list of radio buttons
datepicker	Select a date range
datepicker.day	Select a specific day
datepicker.months	Select a month range
datepicker.month	Select a specific month
toggle	Return a boolean

Configuration

{
  "id": "my-id",
  "component": "selectbox",
  "type": "filter"
}

fields	description
`id`	Used when saving its state and to connect it to Charts.
`component`	Specify the dynamic parameter to use, either those listed above, or your own.
`type`	Specify how `requests` are affected, acting either as a `filter` or as a `scale`. Custom transformers may handle your own types

Warning

Tip When using Architect it will auto-generate an id with a non-meaningful name. We strongly recommend to rename it as soon as you have created it, as this id will be used in chart.dynamic-parameters.

Adding Dynamic Parameters in Dashboard

You can add a dynamic parameter :

from the online dashboard editor and its dialog boxes
in Advanced Mode to edit JSON configuration
by editing directly configuration files in ./config/
Via the menu tab in the main menu selection

Using a Dynamic Parameter in another React Component

You may use a dynamic parameter directly from code. Use the same JSON configuration as described above, and then call it as any React component.

Example:

import React from 'react'
import FpDynamicParameter from 'forepaas/dynamic-parameter'

const myDynP =  {
    id: 'city',
    type: 'filter',
    component: 'checkbox',
    reference: 'city',
    dictionary: 'city',
    default: ['Paris', 'San Francisco']
}
class MyComponent extends React.Component {
    render () {
        return (
            <div className='hello-world'>
                <FpDynamicParameter dynamic-parameter={myDynP} />
            </div>
        )
    }
}
export default MyComponent

Creating your own Dynamic Parameter

You can write your own component to customize the appearance of your dynamic parameter.

?>➡️ Check out the available tutorial here!

Dynamic Parameters#

#List of available Dynamic Parameters

#Configuration

#Adding Dynamic Parameters in Dashboard