furo-app-flow-router

furo-app-flow-router #

@furo/route v2.6.13
import '@furo/route/src/furo-app-flow-router.js';
exports FuroAppFlowRouter js
exports <furo-app-flow-router> custom-element-definition
superclass LitElement
mixes FBP
summary Application Flow => routing

furo-app-flow-router

Use this component with app-flow and furo-pages to implement your application flow / routing

1

   <app-flow-router set-config="--flowConfigLoaded" fn-trigger="--flowEvent" fn-back="--wire" fn-forward="--wire"></app-flow-router>

*Configuration Array

current flow-event-name target [mapping]
view-main form-complete detail-view from => to
* menu-settings-click settings
* all-fields-req all-qps *
* some-fields-req some-qps a=>b,x=>id,c=>item 
1
2
3
4
5
6
7

 [
   ['view-main', 'button-tap', 'detail-view',  'task => id],
   ["*", "search", "EXTERNAL_LINK: https://google.com/"],
   ["*", "searchInNewWindow", "EXTERNAL_LINK_BLANK: https://google.com/"]
   ["*", "searchInNewWindow", "EXTERNAL_LINK_BLANK:", *],
   ["*", "activity-url", "URL", "*"],
 ]

if the current view is view-main and the flow-event-name is ‘form-complete’, the view switches to detail-view and data.from is mapped to “to”.

Special configurations: #

  • Set a “*” to map all data 1:1 to the url.

  • You can set a wildcard for “current”. If you check the example: menu-settings-click can be triggered from any current. If there is a “current” with menu-settings-click configured and you are there, the wildcard is not used.

  • if you want to link to a dynamic target outside your app add URL and use fn-emit on the furo-app-flow component with the url as data.

  • if you want to link to a target outside your app add EXTERNAL_LINK: followed by the link

  • if you want to close a page which was openend by a _blank click use the keyword WINDOW-CLOSE

  • if you want to trigger a history.back() use the HISTORY-BACK

  • if there is no history.back() possible use the flow event! HISTORY-BACK and define the target as usual

Attributes and Properties #

config #

config Array

build internal config for faster access

display #

default: 'none'



urlSpaceRegex #

url-space-regex string default: ''

default value of urlSpaceRegex. this value can be rewritten via url-space-regex attribute

Events #

__beforeReplaceState #

at-__beforeReplaceState → void

Fired when before the state will be updated.

view-changed #

at-view-changed → flowEvent

Fired when page was changed.

event-not-found #

at-event-not-found → flowEvent

Fired when view was not found.

Methods #

back #

back() ⟹ void

* → fn-back

trigger a history back



forward #

forward() ⟹ void

* → fn-forward

trigger a history forward



setConfig #

setConfig(config `` ) ⟹ void

`` → fn-set-config

Set the config

  • config

trigger #

trigger(flowEvent `` ) ⟹ boolean

`` → fn-trigger

Trigger the router

  • flowEvent