@reaqtive/components

This package helps creating guided analytics using Qlik APIs. It provides a set of reusable react components to speed up mash up developments. You can choose to use stand alone components and build your own navigation and routing functionalities or you can use RqtvApp and RqtvPage for built-in page navigation functionalities.

Installation

npm install @reaqtive/components

@reaqtive/q will be installed as well, since @reaqtive/components depends on it. @reaqtive/q will help you interact with Qlik engine and Qlik Capability APIs

FILTERS

RqtvButtonBar

RqtvButtonBar it is a paginated listbox shaped as a buttonbar It does not ask for selection confirmation, but just toggle the selection when a button is clicked

You can twek its behavuiour using props.

You can customize its styles using css or using props.

Example:

import React from 'react'
import {RqtvButtonBar} from '@reaqtive/components'

const MyRqtvButtonBar = props =>
<RqtvButtonBar
  qFieldExpr = "$Field"
/>

export default MyRqtvButtonBar

Props:

prop	type	default	required	description
buttonSize	`String`	`'btn-sm'`	❌	The bootstrap class to apply large (btn-lg), standard (btn) or small (btn-sm) size to a button.
buttonsClassName	`String`	`''`	❌	css classes applied to the buttons (it can be overwritten by selections color coding)
buttonsStyle	`Object`	`{}`	❌	style object to customize buttons style (it can be overwritten by selections color coding)
goToFirstPageAfterSelection	`Boolean`	`true`	❌	If true it resets pagination (back to first page) after a selection is made
qDataPageHeight	`Number`	`5`	❌	The number of records asked to the engine for each page
qFieldExpr	`String`		✅	The expression which will be used in the listbox. It can be a fieldname or a valid expression
qSortObject	`Shape`	`{ qSortByState: 1, qSortByFrequency: 0, qSortByNumeric: 0, qSortByAscii: 1, qSortByLoadOrder: 0, qSortByExpression: 0 }`	❌	An array that tells the engine how to sort listbox data. You can set only the relevant properties of the object to 1.
qSortObject.qExpression	`Shape`		❌	Sort by expression.
qSortObject.qExpression.qv	`String`		❌
qSortObject.qSortByAscii	`Number`		❌	Sorts the field by alphabetical order.
qSortObject.qSortByExpression	`Number`		❌	Sorts the field by expression.
qSortObject.qSortByFrequency	`Number`		❌	Sorts the field values by frequency (number of occurrences in the field).
qSortObject.qSortByGreyness	`Number`		❌
qSortObject.qSortByLoadOrder	`Number`		❌	Sorts the field values by the initial load order.
qSortObject.qSortByNumeric	`Number`		❌	Sorts the field values by numeric value.
qSortObject.qSortByState	`Number`		❌	Sorts the field values according to their logical state (selected, optional, alternative or excluded).
qState	`String`	`""`	❌	state of the listbox
toggle	`Boolean`	`true`	❌	if true uses toggle select

RqtvDropdownFilter

RqtvDropdownFilter It is a listbox shaped as a dropdown. It has the same responsive behaviour as bootstrap dropdown when wrapped in a collapse

You can twek its behavuiour using props.

You can customize its styles using css or using props.

Example:

import React from 'react'
import {RqtvDropdownFilter} from '@reaqtive/components'

const MyRqtvDropdownFilter = props =>
<RqtvDropdownFilter
  qFieldExpr="Customer"
  dropdownMenuItemStyle={{textTransform:'uppercase'}}
/>

export default MyRqtvDropdownFilter

Props:

prop	type	default	required	description
align	`String`	`'left'`	❌	It allows to align the dropdown menu to the left or to rhe right of the button
buttonClassName	`String`	`'primary text-light'`	❌	className for the dropdown button
buttonStyle	`Object`	`{}`	❌	style object to customize the dropdown button
clickAwayAccept	`Boolean`	`false`	❌	if true selections are accepted when clicking away from the listbox in selection mode
dropdownMenuHeight	`Number`	`300`	❌	Height of the dropdown when is open
dropdownMenuItemStyle	`Object`	`{}`	❌	style object to customize the style of the dropdown menu items (it can be overwritten by selections color coding)
dropdownMenuStyle	`Object`	`{}`	❌	style object to customize the dropdown menu
dropdownMenuWidth	`Number`	`265`	❌	Width of the dropdown when is open
hideHorizontalScrollbar	`Boolean`	`false`	❌	Show/hide overflowX
qFieldExpr	`String`		✅	The expression which will be used in the listbox. It can be a fieldname or a valid expression
qFieldLabelExpr	`String`		❌	The expression of the title used in the dropdown button (by default it shows the name of the field and the count distinct of that field or the selected value if there is only one selected value)
qSortObject	`Shape`	`{ qSortByState: 1, qSortByFrequency: 0, qSortByNumeric: 0, qSortByAscii: 0, qSortByLoadOrder: 0, qSortByExpression: 0 }`	❌
qSortObject.qExpression	`Shape`		❌	Sort by expression.
qSortObject.qExpression.qv	`String`		❌
qSortObject.qSortByAscii	`Number`		❌	Sorts the field by alphabetical order.
qSortObject.qSortByExpression	`Number`		❌	Sorts the field by expression.
qSortObject.qSortByFrequency	`Number`		❌	Sorts the field values by frequency (number of occurrences in the field).
qSortObject.qSortByGreyness	`Number`		❌
qSortObject.qSortByLoadOrder	`Number`		❌	Sorts the field values by the initial load order.
qSortObject.qSortByNumeric	`Number`		❌	Sorts the field values by numeric value.
qSortObject.qSortByState	`Number`		❌	Sorts the field values according to their logical state (selected, optional, alternative or excluded).
qState	`String`	`""`	❌	state of the listbox
quickSelectionMode	`Boolean`	`false`	❌	if true uses Qlik Sense selection behaviour (begin selection and asks confirmation to apply), if false it uses Qlik View selection behaviour (apply selections immediately)
showCaret	`Boolean`	`true`	❌	Show/hide the caret in the dropdown button
showSearch	`Boolean`	`true`	❌	Show/hide the search input when the dropdown is open
toggle	`Boolean`	`true`	❌	if true uses toggle select

RqtvListbox

RqtvListbox It looks like a Qlik Sense listbox, but is always expanded (does'not turn into a drop down). It will fill its container width

You can twek its behavuiour using props.

You can customize its styles using css or using props.

Example:

import React from 'react'
import {RqtvListbox} from '@reaqtive/components'

const MyRqtvListbox = props => {
  return(
    <RqtvListbox
      qFieldExpr="Customer"
      qLabelExpr="=count(distinct Customer)"
      height={300}
    />
  )
}

export default MyRqtvListbox

Props:

prop	type	default	required	description
alwaysShowSearch	`Boolean`	`false`	❌	if true the search input is alway shown
clickAwayAccept	`Boolean`	`false`	❌	if true selections are accepted when clicking away from the listbox in selection mode
focus	`Boolean`	`true`	❌	if true the search input is automatically focused when mounted
headerStyle	`Object`	`{}`	❌	style object to customize listbox header
height	`Number`	`500`	❌	the height of the listbox
itemStyle	`Object`	`{}`	❌	style object to customize the style of the items displayed by the listbox (it can be overwritten by selections color coding)
listStyle	`Object`	`{}`	❌	style object to customize the list that wraps the records
qFieldExpr	`String`		✅	The expression which will be used in the listbox. It can be a fieldname or a valid expression
qFieldLabelExpr	`String`		❌	The expression shown in the header of the listbox
qSortObject	`Shape`	`{ qSortByState: 1, qSortByFrequency: 0, qSortByNumeric: 0, qSortByAscii: 0, qSortByLoadOrder: 0, qSortByExpression: 0 }`	❌	An array that tells the engine how to sort listbox data. You can set only the relevant properties of the object to 1.
qSortObject.qExpression	`Shape`		❌	Sort by expression.
qSortObject.qExpression.qv	`String`		❌
qSortObject.qSortByAscii	`Number`		❌	Sorts the field by alphabetical order.
qSortObject.qSortByExpression	`Number`		❌	Sorts the field by expression.
qSortObject.qSortByFrequency	`Number`		❌	Sorts the field values by frequency (number of occurrences in the field).
qSortObject.qSortByGreyness	`Number`		❌
qSortObject.qSortByLoadOrder	`Number`		❌	Sorts the field values by the initial load order.
qSortObject.qSortByNumeric	`Number`		❌	Sorts the field values by numeric value.
qSortObject.qSortByState	`Number`		❌	Sorts the field values according to their logical state (selected, optional, alternative or excluded).
qState	`String`	`""`	❌	state of the listbox
quickSelectionMode	`Boolean`	`false`	❌	if true uses Qlik Sense selection behaviour (begin selection and asks confirmation to apply), if false it uses Qlik View selection behaviour (apply selections immediately)
showHeader	`Boolean`	`true`	❌	Show/hide listboxheader.
showHeaderButtonbar	`Boolean`	`false`	❌	Show/hide the buttons in listbox header (showHeader must be set to true to show the buttons)
showListboxDropdownMenu	`Boolean`	`true`	❌	Show/hide the listbox menu as a dropdown in listbox header
titleAction	`Function`	`()=>false`	❌	function called when clicking on the listbox title
titleStyle	`Object`	`{}`	❌	style object to customize listbox title
toggle	`Boolean`	`true`	❌	if true uses toggle select

RqtvModalListbox

RqtvModalListbox It allows you to wrap a listbox inside a modal: the listbox will be hidden and a button will be shown. Clicking the button the listbox will appear inside a modal

Example:

import React from 'react'
import {RqtvModalListbox} from '@reaqtive/components'

const MyRqtvModalListbox = props =>
<RqtvModalListbox
  listboxProps={{
    qFieldExpr:"$Table",
    height:300
  }}
/>

export default MyRqtvModalListbox

Props:

prop	type	default	required	description
buttonClassName	`String`	`'primary text-light'`	❌	className for the dropdown button
buttonStyle	`Object`	`{}`	❌	style object to customize the dropdown button
listboxProps	`Object`		❌	the props which will be passed to the listbox
qLabelExpr	`String`		❌	The expression used in the listbox title and in the button that toggles the listbox

RqtvSearchField

RqtvSearchField It provides you an input field to search a listbox. When the user starts typing a dropdown menu appears under the input field.

You can tweak its behaviour using props

You can customize style using props and css

Example:

import React from 'react'
import {RqtvSearchField} from '@reaqtive/components'

const MyRqtvSearchField = props =>
<RqtvSearchField
  qFieldExpr="Customer"
  placeholder="Search"
/>
export default MyRqtvSearchField

Props:

prop	type	default	required	description
clickAwayAccept	`Boolean`	`false`	❌	if true selections are accepted when clicking away from the listbox in selection mode
dropdownMenuHeight	`Number`	`300`	❌	Height of the dropdown when is open
dropdownMenuWidth	`Number`	`265`	❌	Width of the dropdown when is open
hideHorizontalScrollbar	`Boolean`	`false`	❌	Show/hide overflowX
placeholder	`String`	`'Search'`	❌	The text shown in the input field when not searching
qFieldExpr	`String`		✅	The expression which will be used in the listbox. It can be a fieldname or a valid expression
qSortObject	`Shape`	`{ qSortByState: 1, qSortByFrequency: 0, qSortByNumeric: 0, qSortByAscii: 0, qSortByLoadOrder: 0, qSortByExpression: 0 }`	❌
qSortObject.qExpression	`Shape`		❌	Sort by expression.
qSortObject.qExpression.qv	`String`		❌
qSortObject.qSortByAscii	`Number`		❌	Sorts the field by alphabetical order.
qSortObject.qSortByExpression	`Number`		❌	Sorts the field by expression.
qSortObject.qSortByFrequency	`Number`		❌	Sorts the field values by frequency (number of occurrences in the field).
qSortObject.qSortByGreyness	`Number`		❌
qSortObject.qSortByLoadOrder	`Number`		❌	Sorts the field values by the initial load order.
qSortObject.qSortByNumeric	`Number`		❌	Sorts the field values by numeric value.
qSortObject.qSortByState	`Number`		❌	Sorts the field values according to their logical state (selected, optional, alternative or excluded).
qState	`String`	`""`	❌	state of the listbox
quickSelectionMode	`Boolean`	`false`	❌	if true uses Qlik Sense selection behaviour (begin selection and asks confirmation to apply), if false it uses Qlik View selection behaviour (apply selections immediately)
toggle	`Boolean`	`true`	❌	if true uses toggle select

RqtvMultibox

It returns an accordion that shows a list of fields. A listbox is displayed for the active field. One field at a time can be active.

Example:

import React from 'react'
import {RqtvMultibox} from '@reaqtive/components'

const MyRqtvMultibox = props => {
  return(
    <RqtvMultibox
      fieldList={['$Table', '$Field']}
    />
  )
}

export default MyRqtvMultibox

Props:

prop	type	default	required	description
clickAwayAccept	`Boolean`	`false`	❌	if true selections are accepted when clicking away from an active listbox in selection mode
fieldHeight	`Number`	`300`	❌	The height of the listbox of the active field
fieldList	`Array`		✅	An array of fieldnames which will be displayed in the multibox
qState	`String`		❌	The state of the multibox which will be passed to its listboxes

VISUALIZATIONS

QViz

It is a component that allows to retrieve Qlik visualizations. Qlik visualizations can be retrieved by id (if they already exists in the Qlik Sense app) or they can be created on the fly providing the properties to the engine. QViz also provide an imperative handle to inteact with Qlik visualizazion. To access the handle you have to provide a handle to the QViz component

Example:

import React from 'react'
import {QViz} from '@reaqtive/components'

const MyQVizExamples = () =>
  <>
    <MyQVizFromApp/>
    <MyQVizOnTheFly/>
  </>


const MyQVizFromApp = props => {
  return(
    <QViz
      id="QYthJs"
      height={250}
    />
  )
}

const MyQVizOnTheFly = props =>{
  return(
    <QViz
      id="VizExample1"
      chartProps={{
        chartType:'barchart',
        chartColumns: [
          {
            "qDef":{
              "qFieldDefs": ["[Product Sub Group Desc]"],
               "qFieldLabels": ["Product Sub Group"],
               "qSortCriterias":[{qSortByExpression:1,qExpression:"=Sum([Sales Quantity]*[Sales Price])"}],
               "qReverseSort":true
             }
           },
          "Customer Type",
          {
            "qDef":{
              "qDef":"=Sum([Sales Quantity]*[Sales Price])",
              "qLabel":"Revenue"
            }
          }
        ],
        rest: {
          "showTitles": false,
          "title": "Revenue",
          "barGrouping":{grouping:"stacked"}
        }
      }}
      height={300}
    />
  )
}

export default MyQVizExamples

Props:

prop	type	default	required	description
chartProps	`Object`		❌	the properties of the object to be created on the fly chartProps must be passed as: {'chartType':'string', 'columns':'array', 'rest':'object'} see this link for details https://help.qlik.com/en-US/sense-developer/February2019/Subsystems/APIs/Content/Sense_ClientAPIs/CapabilityAPIs/VisualizationAPI/VisualizationAPI.htm
id	`String`		✅	the id of the visualization to be retrieved and of the div that will contain it
showTitle	`Boolean`	`false`	❌	show/hide the title in Qlik visualization

RqtvVizContainer

It provides a container to a visualization. It accepts multiple children. In case i detects more tha one child, it shows one child at a time and a dropdown menu to toggle the desired child. If its children provide exports methods it automatically shows export buttons

Example:

import React, {useState, useEffect, useRef} from 'react'
import {RqtvVizContainer, QViz, RqtvMaximizePortalEl} from '@reaqtive/components'

const MyRqtvContainer = props =>
<RqtvVizContainer
  height={'300px'}
  showExportExcel={true}
  showExportPdf={true}
  showExportImg={true}
  maximizeElRef={props.maximizeElRef}
  onMaximize={props.onMaximize}
>
  <QViz id="nRxXG" title="bar chart"/>
</RqtvVizContainer>

const MyMultiVizRqtvContainer = props =>
<RqtvVizContainer
  style={{height:'300', maxHeight:'300'}}
  maximizeElRef={props.maximizeElRef}
  onMaximize={props.onMaximize}
  vizRef={props.vizRef}
>
  <QViz key="pDKRhr" id="pDKRhr" title="scatter chart"/>
  <QViz key="nvqpV" id="nvqpV" title="line chart"/>
</RqtvVizContainer>

const MyRqtvContainerExample = props => {
  const maximizeElRef = useRef()
  const vizRef = useRef()

  const viz = vizRef.current&&vizRef.current.getQViz()
  /**
    * HTML overflow is handled by RqtvApp if the RqtvMaximizePortalEl and RqtvVizContainer
    * are inside it, otherwise you will have to handle it in your code, below an example
    */

  const [isMaximized, setIsMaximized] = useState(false)

  useEffect(()=>{
    const html = document.getElementsByTagName("html")[0];
    const maximize = () => {
      html.style.overflow ='hidden'
      html.scrollTop=0
    }
    const minimize = () => {
      html.style.overflow ='auto'
    }
    isMaximized?maximize():minimize()
  }, [isMaximized])

  const onMaximize = () => {
    setIsMaximized(!isMaximized)
  }

  return(
    <>
      <RqtvMaximizePortalEl maximizeElRef={maximizeElRef}/>
      <MyRqtvContainer
        maximizeElRef={maximizeElRef}
        onMaximize={onMaximize}
      />
      <MyMultiVizRqtvContainer
        maximizeElRef={maximizeElRef}
        onMaximize={onMaximize}
        vizRef={vizRef}
      />
    </>
  )
}
export default MyRqtvContainerExample

Props:

prop	type	default	required	description
className	`String`	`''`	❌	Container css classes
containerClassName	`String`	`''`	❌	Container header css classes
height	`Union<Number\|String>`	`300`	❌	The height of the container pixels or % can be used
height<1>	`Number`		❌
height<2>	`String`		❌
hideScrollWhenMaximized	`Boolean`	`true`	❌	If true window scrollbar will be hidden when the container is maximized
showExportExcel	`Boolean`	`true`	❌	Show/hide export to excel button
showExportImg	`Boolean`	`true`	❌	Show/hide export to img button
showExportPdf	`Boolean`	`true`	❌	Show/hide export to pdf button
vizRef	`Union<Function\|Object>`		❌	Ref to the currently shown Viz
vizRef<1>	`Function`		❌
vizRef<2>	`Object`		❌

APP OBJECTS

RqtvCurrentSelections

it is a toolbar that displays the current selection status and the buttons to go back, forward and clear current selections. Clicking on the button displayin the number of current selections, a modal will appear showing the current selection box (fields and selected values) It currently does not support alternate states. It always display the default state. Styles can be customized via css (or scss)

Example:

import React from 'react'
import  {RqtvCurrentSelections} from '@reaqtive/components'

const MyRqtvCurrentSelections = props =>
    <RqtvCurrentSelections
      useCurrentSelectionModal={true}
      isResponsive={true}
      showModalToggler={true}
      alwayShowToolbar={true}
      hidePrefix={'%'}
    />

export default MyRqtvCurrentSelections

Props:

prop	type	default	required	description
alwaysShowToolbar	`Boolean`	`false`	❌	if true the current selection toolbar is always shown even if no selection history exists (0 current, selection 0 back-count and 0 forward count)
breakPoint	`Enum('xl', 'lg', 'md', 'sm')`	`'lg'`	❌	screentype from which current selections are responsive
excludeHidden	`Boolean`		❌	if true field hidden from current selections are not considered in selection count
hidePrefix	`String`		❌	prefix of the fields to be hidden from current selections modal
isResponsive	`Boolean`	`true`	❌	when true it transform the toolbar into a fixed positioned floating button
qState	`String`	`''`	❌	the alternate state from which to display current selections
showModalToggler	`Boolean`	`true`	❌	it allows to show/hide the modal toggler
useCurrentSelectionModal	`Boolean`	`true`	❌	it allows to turnoff the current selections box modal

RqtvSearchObject

It dispays a search object to search a single string in multiple fields.

If rendered inside the rqtv-navbar it will have fixed position and search results will colver the underlying page

Example:

import React from 'react'
import {RqtvSearchObject} from '@reaqtive/components'

const MyRqtvSearchObject =  props =>
   <RqtvSearchObject
      useBackdrop={false}
      alwaysExpanded={false}
      expandFrom='left'
      resultsWidth='100%'
      placeholder="Search"
    />

export default MyRqtvSearchObject

Props:

prop	type	default	required	description
alwaysExpanded	`Boolean`	`false`	❌	If true the search input will always be displayed
expandFrom	`Enum('right', 'left')`	`'left'`	❌	The direction from which the input will expand if not always expanded
onClose	`Function`		❌	function fired after hiding the search input. (not called if alwaysExpanded is true)
onOpen	`Function`		❌	function fired after showing the search input. (not called if alwaysExpanded is true)
searchFields	`Array`		❌	the fields of the data model to search against
width	`Union<String\|Number>`	`'100%'`	❌	width of the component. It accept px or %
width<1>	`String`		❌
width<2>	`Number`		❌

RqtvNavbar

It is a component that renders the top navbar of the reaqtive app and add spacing to the top of the page if the navbar is fixed top. It includes the RqtvCurrentSelections component and the RqtvSearchObject component. It is based on bootstrap navbar, its styles can be customized using navbarClassName prop which will be passed to the navbar itself or via sass/css

Example:

import React from 'react'
import {RqtvNavbar} from '@reaqtive/components'

const MyRqtvNavbar = props => {
  return(
  <>
    <div className="border border-primary">
      <RqtvNavbar
        showSideMenuToggle={false}
        title="RqtvNavbar"
        fixedTop={false}
      />
      <div className="container py-5">
        <p>Below your content</p>
      </div>
    </div>
  </>
  )

}

export default MyRqtvNavbar

Props:

prop	type	default	required	description
brandImgStyle	`Object`		❌
brandImgUrl	`String`		❌
brandUrl	`String`		❌
fixedTop	`Boolean`	`true`	❌	if true the navbar would be fix positioned at the top of the page
navbarBrandAction	`Function`		❌
navbarClassName	`String`	`''`	❌	css classes that will be passed to the navbar div
onToggleMenu	`Function`		❌	function fired when clicking on the HamburgerMenu button
searchResultsHeight	`Union<String\|Number>`	`500`	❌
searchResultsHeight<1>	`String`		❌
searchResultsHeight<2>	`Number`		❌
showCurrentSelections	`Boolean`	`true`	❌	show/hide the current selections toolbar
showSearch	`Boolean`	`true`	❌	show/hide the global search-object
showSideMenuToggle	`Boolean`	`true`	❌	show/hide hamburger menu

RqtvSideMenu

It returns toggleable fixed-positioned side menu displayed on the left of the page. Default tabs are the list of pages of the app and a multibox with filters. The open/close state has to be managed in parent component

Example:

import React, {useState} from 'react'
import {RqtvSideMenu, RqtvSideMenuMain} from '@reaqtive/components'

const MyRqtvSideMenu = props => {
  const [open, setOpen] = useState(false)

  const toggleSideMenu = () => {
    setOpen(!open)
  }

  const closeSideMenu = () => {
    setOpen(false)
  }

  return(
    <div style={{position:'relative'}}>
      <RqtvSideMenu
        isOpen={open}
        onClose={closeSideMenu}
      >
        <div className="text-light text-center">Here you can display your content</div>
      </RqtvSideMenu>
      <RqtvSideMenuMain isOpen={open}>
        <div className="container-fluid border border-primary">
          <div className="my-2">
            <button className="btn btn-primary" onClick={toggleSideMenu}>Toggle Menu</button>
          </div>
          <div className="py-2">Your content Here</div>
        </div>
      </RqtvSideMenuMain>
    </div>
  )
}

export default MyRqtvSideMenu

Props:

prop	type	default	required	description
additionalTabs	`Array[]<Shape>`	`[]`	❌	additional tabs to display after pages and filters
additionalTabs[].icon	`ReactElement`		❌
additionalTabs[].label	`String`		❌
additionalTabs[].tab	`ReactElement`		❌
alwaysShowBackdrop	`Boolean`	`false`	❌	if tru backdrop is always shown when RqtvSideMenu is open
clickAwayAccept	`Boolean`	`false`	❌	if true selections are accepted when clicking away from an active listbox in selection mode in the multibox
isOpen	`Boolean`		✅	open/close the menu
onClose	`Function`		✅	function to set isOpen to false
useFieldList	`Boolean`	`false`	❌	show hide the multibox
usePageList	`Boolean`	`false`	❌	show/hide the page list tab
useTabs	`Boolean`	`false`	❌	if true it uses the the tabs to display different views in the side menu, if false it just shows its children

APP

Components described in this section are supposed to work together: it is suggested to use RqtvApp if you want to use the other components describe here.

RqtvApp

It provides routing using react router and a context that allows you to store app info to be available everywhere inside your app.

Example:

import React from 'react'
import {RqtvApp} from '@reaqtive/components'
import {HomePage, FirstPage, SecondPage} from './rqtv-page'

const MyRqtvApp = (props) => {
  return(
    <RqtvApp title="Example App" brandUrl='/' hidePrefix="Prod" >
        <FirstPage path="/first-page"/>
        <SecondPage path="/second-page"/>
        <HomePage path="/" linkName="HOME"/>
    </RqtvApp>
  )
}

export default MyRqtvApp

Props:

prop	type	default	required	description
brand	`String`		❌	the brand of the app displayed in the navbar. An image is expected: import it in the app and pass it as a prop
brandAction	`Function`		❌	a function called when clicking on the navbar brand. If defined will prevent navigating to brandUrl
brandStyle	`Object`		❌	styles to be applied to the image container
brandUrl	`String`		❌	the url to redirect to when clicking on the brand
hidePrefix	`String`	`'%'`	❌	Prefix to hide a field in current selections modal. Hidden fields will be considered in selectins count and in back, forward actions
neverToggleFieldsMatch	`Shape`		❌	matching fields will have toggle set to false and quickSelectionMode set to true in when appearing in side menu and in current selections box.
neverToggleFieldsMatch.mask	`Array[]<String>`		❌
neverToggleFieldsMatch.method	`Enum('include', 'exclude')`		❌
pages	`Array[]<Shape>`		❌
pages[].exactActiveMatch	`Boolean`		❌
pages[].linkName	`String`		❌
pages[].path	`PropTypes.path`		❌
searchFieldsMatch	`Shape`	`{method:'exclude', mask:['**']}`	❌	fields to be used in the search object in the navbar. '' can be used as a wildcard (e.g. 'Q' will include consider all fields starting with 'Q')
searchFieldsMatch.mask	`Array[]<String>`		❌
searchFieldsMatch.method	`Enum('include', 'exclude')`		❌
sideMenuFieldsMatch	`Shape`	`{method:'include', mask:['**']}`	❌	fields to be displayed in the side menu. '' can be used as a wildcard (e.g. 'Q' will include consider all fields starting with 'Q')
sideMenuFieldsMatch.mask	`Array[]<String>`		❌
sideMenuFieldsMatch.method	`Enum('include', 'exclude')`		❌
title	`String`		❌	the title of the app displayed in the navbar
triggers	`Array`	`[]`	❌	triggers to fire when opening the app (do not abuse triggers)
useRouter	`Boolean`	`true`	❌	if true the application will be wrapped in react router and in a switch

RqtvPage

It is a container based on the Route component of the React Router. It can't be used outside RqtvApp. It is a dummy component which provides a the RqtvPageContext and a QGenericObject with 2 experessions: qTitleExpr --> providing the qTitle result qConditionExpr --> providing the qCondition result When navigating among RqtvPages you can use query strings to select values in fields. Here an example of a query string: ?selections=Customer:Benedict;Zocalo&selections=Account:61099 . Place your query string at the end of the url you are navigating to. RqtvPage also accept triggers which are fired when the page mounts. Like Routes RqtvPages can be nested. RqtvPage does not unMount when the route change, to force unmount add a key prop (it has to be unique among pages).

Example:

import React from 'react'
import {RqtvStandardTemplate, RqtvPage, RqtvCurrentSelections, RqtvDropdownFilter,  RqtvListbox, RqtvModalListbox} from '@reaqtive/components'
import {useRouteMatch, NavLink} from 'react-router-dom'
import {useQFieldReducer} from '@reaqtive/q'
import MyRqtvStandardTemplate from './rqtv-standard-template'
import MyRqtvContainerExample from './rqtv-viz-container'
import TabsExample from './tabs'


const HomePage = props =>
<RqtvPage {...props} exact={true} qTitleExpr="'Homepage'">
  <RqtvStandardTemplate sideMenuFieldsMatch={{method:'include', mask:['Product*']}}>
    <div>Home Page</div>
    <MyRqtvContainerExample/>
    <RqtvCurrentSelections qState="comparison"/>
    <RqtvListbox alwaysOneSelected={true} defaultValue={'Zocalo'} qFieldExpr={"Customer"} />
  </RqtvStandardTemplate>
</RqtvPage>

const FirstPage = props =>{
  return(
    <RqtvPage {...props}>
      <RqtvStandardTemplate sideMenuFieldsMatch={{method:'include', mask:['Customer*', 'Account*']}}>
        <RqtvListbox qFieldExpr="Customer" />
        <MyFirstNestedPage/>
      </RqtvStandardTemplate>
    </RqtvPage>
  )
}


const MyFirstNestedPage = props =>{
  const { path, url } = useRouteMatch();

  return(
    <>
      <RqtvPage
        path={`${path}/with-condition`}
        qConditionExpr={'=count(distinct Customer)=1'}
        fallbackPage={`${path}`}
      >
        <div>this is a nested page with a condition</div>
        <MyRqtvContainerExample/>
      </RqtvPage>
      <RqtvPage path={`${path}`} exact={true}>
        <div>this is a nested page with no condition</div>
        <div>
          <NavLink to={`${url}/with-condition/?selections=Customer:Benedict&selections=Account:61099`}><button>go to page with condition</button></NavLink>
          <MyRqtvContainerExample/>
        </div>
      </RqtvPage>
    </>
  )
}

const SecondPage = props =>
<RqtvPage {...props} qTitleExpr="'Revenue is: '&Sum([Sales Quantity]*[Sales Price])" exactActiveMatch={false}>
  <MyRqtvStandardTemplate>
    <TabsExample/>
  </MyRqtvStandardTemplate>
</RqtvPage>

export {HomePage, FirstPage, SecondPage}

Props:

prop	type	default	required	description
exact	`Boolean`	`false`	❌	shows the route only if the path match exactly with the addressbar. See the React Router docs for details
fallbackPage	`String`		❌	the page the user is redicrected to when the qConditionExpr returns false (0)
linkName	`String`		❌	the name of the page displayed in the side-menu of the app. If not set it will be equal to the path, replacing '-' with ' '
loadingComponent	`ReactElement`		❌	the component displayed while triggers fired
path	`String`		✅	the path to reach the page. See React Router for details
qConditionExpr	`String`	`""`	❌	a qlik espression that returns a value, used in combination with the fallback page prop, it redirects when false
qTitleExpr	`String`	`"'My Reaqtive Page'"`	❌	the expression that can be used to make the title dynamic as in Qlik Sense sheets
triggers	`Array`	`[]`	❌	triggers fired when the page is mounted see @reaqtive/q docs for details

RqtvStandardTemplate

It is a component that allows you to use Reaqtive main components without having to declare them one by one. Of course does not allow the same flexibility as recreating a template manually. It includes the RqtvSideMenu, the RqtvNavbar and the RqtvPageHeader. It is suggested to use this component inside the RqtvApp

Example:

import React from 'react'
import {RqtvStandardTemplate, RqtvPage} from '@reaqtive/components'


const MyRqtvStandardTemplate = props => {
  return(
    <RqtvStandardTemplate sideMenuClickAwayAccept={false}>
      <div>Standard Template Example</div>
      {props.children}
    </RqtvStandardTemplate>
  )
}

export default MyRqtvStandardTemplate

Props:

prop	type	default	required	description
containerClassName	`String`		❌	the css classes of the container wrapping the page
containerStyle	`Object`		❌	it allows to set the styles of the div conatining the page (the components you will develop)
currentSelectionsBreakPoint	`Enum('xl', 'lg', 'md', 'sm')`		❌	screentype from which current selections are responsive
searchFieldsMatch	`Shape`		❌	fields to be used in the search object in the navbar. '' can be used as a wildcard (e.g. 'Q' will include consider all fields starting with 'Q')
searchFieldsMatch.mask	`Array[]<String>`		❌
searchFieldsMatch.method	`Enum('include', 'exclude')`		❌
showSearch	`Boolean`	`true`	❌	show/hide the search object in the navbar
sideMenuClickAwayAccept	`Boolean`	`false`	❌	if true selections are accepted when clicking away from an active listbox in selection mode in the side menu multibox
sideMenuFieldsMatch	`Shape`		❌	fields to be displayed in the side menu. '' can be used as a wildcard (e.g. 'Q' will include consider all fields starting with 'Q')
sideMenuFieldsMatch.mask	`Array[]<String>`		❌
sideMenuFieldsMatch.method	`Enum('include', 'exclude')`		❌
useContainerFluid	`Boolean`	`true`	❌	it lets you choose between a bootstrap container or container-fluid to wrap the page
usePageHeader	`Boolean`	`true`	❌	show/hide the page header that would contain only the title of the page and can't be customized
useSideMenu	`Boolean`	`true`	❌	show/hide the side menu

TRIGGERS

RqtvApp and RqtvPage accept arrays of triggers as props. They are fired before rendering the app or the page. This is still an experimental feature, but data structures are very unlikely to change. Below you can find the types of triggers you can use described as PropTypes

/*Select one value of one field*/
const fieldSelectionTrigger = PropTypes.shape({
    type: 'fieldSelection',
    params: PropTypes.shape({
      fieldName:PropTypes.string,
      value:PropTypes.string,
    })
  })

/*Select multiple values of one field*/
const fieldSelectionsTrigger = PropTypes.shape({
  type: 'fieldSelections',
  params: PropTypes.shape({
    fieldName:PropTypes.string,
    value:PropTypes.arrayOf(PropTypes.shape({
      qText: PropTypes.string,
      qIsNumeric: PropTypes.bool,
      qNumber: PropTypes.number
    })),
  })
})

/*Clear one field*/
const clearFieldTrigger =  PropTypes.shape({
  type: 'clearField',
  params: PropTypes.shape({
    fieldName:PropTypes.string,
  })
})

const triggerType = PropTypes.oneOf([clearFieldTrigger,fieldSelectionsTrigger,fieldSelectionTrigger])

STYLES

Styles are based on bootstrap classes and components. In reaqtive components plain boostrap classes have been used and they are scoped using the name of the Reaqtive components they are used into. For example the wrapper div of a RqtvListbox has rqtv-listbox class, the RqtvSideMenu a rqtv-side-menu class. You can customize the styles the components referring to these classes in your scss files. Moreover you can customize Reaqtive theme by including a theme file and changing theme variables values. You can add your theme creating an index.scss file and a theme.scss file. Below an example.

theme.scss

...
$primary: #5C88DA;
$side-menu-field-list-border-color:rgba(0,0,0,0);
$navbar-bg:#fff;
$navbar-color:$primary;
...

index.scss

// import files with this order otherwise Reaqtive theme will overwrite yours
@import "./styles/theme.scss";
@import "~@reaqtive/components/dist/index.scss";
...

index.js

...
import './index.scss'
...

You can find the complete list of Reaqtive theme variable here and the complete list of Bootstrap variables here