Share
Explore

Workflows Fall Back (Public documentation)

Why is a fallback solution important?

When loading the Flare workflows iFrame, there can be times when the app may not load due to a number of factors including browser type, network speed, anti-virus software and other ways that our component may not work for your end users as desired.

In these instances, we want to ensure that you are still able to provide a usable experience for all end users, allowing your customers to have peace of mind their employees are being onboarded successfully every time.

The solution is provide a fallback front-end and server-side code that you as the partner are able to implement directly into your application and have full control over how it is presented.

This fallback UI will allow the end user to declare their bank and tax details and select either of My Own Fund, Default Fund or SMSF. It does not give them the ability to select a promoted fund provided by Flare.


What does the fallback UI look like?

How do I implement the fallback UI?

It is recommended that the fallback UI be loaded directly from the partners application should the app take longer than a given time to load.

In order to know whether the app has loaded or not, the iFrame will emit an
appReady
event. If this event is not triggered within a suitable timeframe, then the partner application will hide the iFrame and can show the front-end UI snippet suggested below.


<script>
function onLoadIframe() {
const messageSender = 'flare';
const iframe = document.getElementById('flareWorkflows');

window
.addEventListener(
'message'
,
(event) => {
const
{ data } = event;
if
(!data || data.sender !== messageSender) {
return
;
}
switch
(data.type) {
case
'appReady'
:
// listen for this
appReady
event,
// if it's not triggered within a given timeframe,
// then hide the iframe below and show the front-end UI snippet
break;

default
:
break
;
}
},
false
);
}
</script>


Fallback UI

image.png
image.png
image.png




Server-side code (Node.js example)

IMPORTANT: DO NOT use this server-side code below in the browser. The accountKey is a sensitive piece of data and must only be used server-side.

async function fallbackSuperUpdate
(req
,
res) {

const
accountKey = "ENTER_YOUR_ACCOUNT_KEY"
const
domainUrl = 'https://sandbox-partner.flarehr.com'
;
const
profileId = 'ENTER_THE_USERS_PROFILE_ID'
;

if
(!req.
body
.
fundType
)
return
res.
status
(400).
send
('Please select a fund type')

let
payload = {}

if
(req.
body
.
fundType
=== 'myOwnFund') {
if
(!req.
body
.
fundUsi
)
return
res.
status
(400).
send
('Please enter your funds USI')
if
(!req.
body
.
memberNumber
)
return
res.
status
(400).
send
('Please enter a member number')
if
(!req.
body
.
signature
)
return
res.
status
(400).
send
('Please type in your full name for a signature')

payload = {
choice
: {
ordinarySuperFundChoice
: {
fundUsi
: req.
body
.
fundUsi
,
memberNumber
: req.
body
.
memberNumber
}
}
}
}

if
(req.
body
.
fundType
=== 'defaultFund') {
if
(!req.
body
.
signature
)
return
res.
status
(400).
send
('Please type in your full name for a signature')

payload = {
choice
: 'defaultFundChoice'
}
}

if
(req.
body
.
fundType
=== 'selfManagedFund') {
if
(!req.
body
.
signature
)
return
res.
status
(400).
send
('Please type in your full name for a signature')

payload = {
choice
: {
smsfChoice
: {
fundAbn
: req.
body
.
fundAbn
,
fundName
: req.
body
.
fundName
,
addressLine1
: req.
body
.
addressLine1
,
addressLine2
: req.
body
.
addressLine2
,
addressSuburb
: req.
body
.
addressSuburb
,
addressState
: req.
body
.
addressState
,
addressPostcode
: req.
body
.
addressPostcode
,
bankAccountBsb
: req.
body
.
bankAccountBsb
,
bankAccountNumber
: req.
body
.
bankAccountNumber
,
bankAccountName
: req.
body
.
bankAccountName
,
electronicServiceAddress
: req.
body
.
electronicServiceAddress
}
}
}
}


console
.
log
('payload'
,
payload)
const
url = `${domainUrl}/super-selection/v1.0/${profileId}/super-choice`
;

const
config = {
headers
: {
'X-API-KEY': accountKey
}
}

try
{
const
{ data
,
status } =
await
axios.
put
(url
,
payload
,
config)
return
res.
status
(200).
send
({
success
:
true,
data
,
status })
}
catch
(error) {

// if an invalid USI is entered,the following is text is returned with a 500 status response:
// "Error while fetching Australian super funds list: SuperNotFound"
console
.
log
('error message'
,
error.
response
.
data
)
return
res.
status
(400).
send
({
success
:
false,
message
: error.
response
.
data
})
}

}
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.