Working with the Flow player - Boomi Flow Documentation | Help | Service Integrations

When we build an app on the Boomi Flow platform, the app does not yet have an user interface. What happens is, the platform describes the user interface elements to the player, and the player turns the description into an interface. The platform does not generate the interface; the player does.

A Flow player is this interface used to render our apps. Players use themes (think of them as skins) for the app. We ship with all of the Bootswatch themes as standard, as well as the Salesforce 1 theme. The Bootstrap Paper theme is the default version of the theme in the player.

All tenants ship with a default player, that can be used to run apps.

For example, this is how an app is rendered using the Flow default player:

We can also create a new player, and customize the CSS code.

Here is the example of an app that is rendered using a custom Salesforce player:

Here is the code for the default player:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="manywho" style="height: 100%;">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="icon" href="https://assets.manywho.com/img/favicon.ico">
    <title>Boomi Flow</title>
    <style>
        .mw-bs .wait-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            min-height: 500px;
            z-index: 1100;
            background-color: rgba(255, 255, 255, 0.5);
        }

        .mw-bs .wait-message {
            position: relative;
            text-align: center;
            margin-top: 1em;
            display: block;
            top: 40%;
            font-size: 2em;
            padding: 0 2em;
        }

        /* outer */
        .mw-bs .wait-spinner {
            display: block;
            position: relative;
            left: 50%;
            width: 150px;
            height: 150px;
            margin: 200px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #268AAF;
            -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        /* middle */
        .mw-bs .wait-spinner:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #31B2E2;
            -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
              animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        /* inner */
        .mw-bs .wait-spinner:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #154E62;
            -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
              animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        @-webkit-keyframes spin {
            0%   {
                -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);  /* IE 9 */
                transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);  /* IE 9 */
                transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
            }
        }
        @keyframes spin {
            0%   {
                -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);  /* IE 9 */
                transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);  /* IE 9 */
                transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
            }
        }
    </style>
</head>
<body style="height: 100%;">
    <div id="manywho">
        <div id="loader" class="mw-bs" style="width: 100%; height: 100%;">
            <div class="wait-container">
                <div class="wait-spinner"></div>
            </div>
        </div>
    </div>

    <script src="https://assets.manywho.com/js/vendor/jquery-2.1.4.min.js"></script>

    <script>
        var manywho = {
            cdnUrl: 'https://assets.manywho.com',
            requires: ['core', 'bootstrap3'],
            initialize: function () {

                var queryParameters = manywho.utils.parseQueryString(window.location.search.substring(1));

                manywho.settings.initialize({
                    adminTenantId: 'da497693-4d02-45db-bc08-8ea16d2ccbdf',
                    playerUrl: [ location.protocol, '//', location.host, location.pathname ].join(''),
                    joinUrl: [ location.protocol, '//', location.host, location.pathname ].join('')
                });

                var options = {
                    authentication: {
                        sessionId: queryParameters['session-token'],
                        sessionUrl: queryParameters['session-url']
                    },
                    navigationElementId: queryParameters['navigation-element-id'],
                    mode: queryParameters['mode'],
                    reportingMode: queryParameters['reporting-mode'],
                    replaceUrl: true,
                    collaboration: {
                        isEnabled: false
                    },
                    inputs: null,
                    annotations: null,
                    navigation: {
                        isFixed: true,
                        isWizard: false
                    },
                    callbacks: [],
                    theme: queryParameters['theme']
                };

                var tenantId = queryParameters['tenant-id'];
                if (!tenantId) {
                    tenantId = window.location.pathname
                                .split('/')
                                .filter(function (path) {
                                    return path && path.length > 0;
                                })[0];
                }

                manywho.engine.initialize(
                    tenantId,
                    queryParameters['flow-id'],
                    queryParameters['flow-version-id'],
                    'main',
                    queryParameters['join'],
                    queryParameters['authorization'],
                    options,
                    queryParameters['initialization']
                );

            }
        };
    </script>

    <script src="https://assets.manywho.com/js/loader.min.js"></script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

<!DOCTYPE html>

<head>

<title>Boomi Flow</title>

<style>

.mw-bs .wait-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

min-height: 500px;

z-index: 1100;

background-color: rgba(255, 255, 255, 0.5);

}

.mw-bs .wait-message {

position: relative;

text-align: center;

margin-top: 1em;

display: block;

top: 40%;

font-size: 2em;

padding: 0 2em;

}

/* outer */

.mw-bs .wait-spinner {

display: block;

position: relative;

left: 50%;

width: 150px;

height: 150px;

margin: 200px 0 0 -75px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #268AAF;

-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

}

/* middle */

.mw-bs .wait-spinner:before {

content: "";

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #31B2E2;

-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

}

/* inner */

.mw-bs .wait-spinner:after {

content: "";

position: absolute;

top: 15px;

left: 15px;

right: 15px;

bottom: 15px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #154E62;

-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(0deg); /* IE 9 */

transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */

}

100% {

-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(360deg); /* IE 9 */

transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */

}

@keyframes spin {

0% {

-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(0deg); /* IE 9 */

transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */

}

100% {

-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(360deg); /* IE 9 */

transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */

}

</style>

</head>

</div>

var manywho = {

cdnUrl: 'https://assets.manywho.com',

requires: ['core', 'bootstrap3'],

initialize: function () {

var queryParameters = manywho.utils.parseQueryString(window.location.search.substring(1));

manywho.settings.initialize({

adminTenantId: 'da497693-4d02-45db-bc08-8ea16d2ccbdf',

playerUrl: [ location.protocol, '//', location.host, location.pathname ].join(''),

joinUrl: [ location.protocol, '//', location.host, location.pathname ].join('')

});

var options = {

authentication: {

sessionId: queryParameters['session-token'],

sessionUrl: queryParameters['session-url']

navigationElementId: queryParameters['navigation-element-id'],

mode: queryParameters['mode'],

reportingMode: queryParameters['reporting-mode'],

replaceUrl: true,

collaboration: {

isEnabled: false

inputs: null,

annotations: null,

navigation: {

isFixed: true,

isWizard: false

callbacks: [],

theme: queryParameters['theme']

};

var tenantId = queryParameters['tenant-id'];

if (!tenantId) {

tenantId = window.location.pathname

.split('/')

.filter(function (path) {

return path && path.length > 0;

})[0];

}

manywho.engine.initialize(

tenantId,

queryParameters['flow-id'],

queryParameters['flow-version-id'],

'main',

queryParameters['join'],

queryParameters['authorization'],

options,

queryParameters['initialization']

);

}

};

</script>

</body>

</html>

Please check here for the most updated version of the player code. We can also access the code by opening the Players tab and selecting the default player.

Flow players are shared source.