Grab it from Github and install with Yarn (the npm CLI works too).
git clone https://github.com/chartiq/finsemble-seed
cd finsemble-seed
yarn install
yarn start
You've now warped in a new SmartDesktop, complete advanced window management, inter-app communications, and a toolbar from which to orchestrate it all. Go ahead and take it for a spin!
Adding apps to your SmartDesktop is easy with the Finsemble CLI. Just point the CLI at a URL or local executable to automatically integrate it, or have the CLI scaffold a new web app for you for local development (React and Angular are supported out-of-the-box!).
Now let's add some demo apps to play with:
npx finsemble-cli add component "Account Detail" url https://documentation.finsemble.com/tutorials/components/accountDetail/accountDetail.html
npx finsemble-cli add component "Account Statement" url https://documentation.finsemble.com/tutorials/components/accountStatement/accountStatement.html
(While you can install the CLI globally, we recommend using local installations via npx
to prevent version
mismatches.)
Now restart the SmartDesktop (just between us devs, there's a hidden keyboard shortcut to do so: CTRL+ALT+SHIFT+R). Our new apps are now available in the App Launcher menu. Launch a few, and test out the SmartDesktop's snapping and grouping features.
🙌 Easy-peasy, eh?
Window management is sweet, but the SmartDesktop's real superpower is preloads! Preloads allows us to inject logic into existing Javascript app, augmenting or modifying its behavior. Even without access to the source code, you can deeply integrate an app into the rest of your SmartDesktop.
Let's create a new preload and inject it into our Account Detail app:
npx finsemble-cli add preload myFirstPreload
npx finsemble-cli inject myFirstPreload "Account Detail"
npx finsemble-cli inject myFirstPreload "Account Statement"
This will create a new script called myFirstPreload.js
and add it to the list of trusted preloads.
Note: When working with preloads, security is a big deal that we take seriously! Finsemble's security infrastructure has been rigorously engineered and professionally audited to keep your data safe on the new frontier of desktop integration. You can read more about security policies here.
Replace the the runPreload
function with the following:
function runPreload() {
alert("Hello from a preload!");
}
For Webpack to detect our new preload, we need to restart the build by shutting down the SmartDesktop (or killing it at
the command-line with CTRL-c) and running yarn start
again. Once its up, launch an account detail app and see your new
preload in action!
The SmartDesktop comes equipped with linker channels, pub-sub channels that allow you to integrate apps with minimal code. Let's use the Finsemble Client API (which is automatically preloaded into all apps) to automatically sync the Account Detail and Account Statement apps.
Replace the runPreload
function in myFirstPreload.js
with the following:
function runPreload() {
FSBL.Clients.LinkerClient.subscribe("account", (acc) => {
// This function is a built-in global in both the
// Account Detail and Account Statement apps
// that we'll reuse.
window.displayAccount(acc);
});
}
Restart the SmartDesktop, and launch both an Account Detail and Account Statement app. By placing them on the same color linker channel, they can automatically synchronize as you change the account in focus!
At this point it's appropriate to laugh maniacally as you relish your new unbridled power give yourself a pat on the
back for learning preloads. Have fun and build something cool!
Once you've got your SmartDesktop how you like, you can package it up into a custom EXE and deploy it to your users. The SmartDesktop has two parts: assets, hosted a webserver; and a runtime built, on the Finsemble Electron Adapter.
To deploy the assets, build them in prod mode:
yarn build:prod
Then host them on a web server of your choosing, but we include a prebuilt Express server for your convenience. Let's start it up:
yarn server
A file called configs/application/manifest-local.json
controls where the runtime looks for the assets (and lots of
important things - check the Config Reference for more). In our case, the dev and prod
URL's are the same, but you'll want to change them.
The runtime is deployed as an installer, packaged as an EXE. Let's make it now. In a separate terminal, run this (it will take a while):
yarn makeInstaller:prod
And voilà! Inside ./pkg
you'll find a new installer for SmartDesktop that you can distribute however you distribute
other EXE's to your users. Try running it to install your custom SmartDesktop to your local machine.
Need to integrate a native desktop app? We've got you covered! Assimilate native apps directly for visual integration, or use our .NET or Java API's for deep logical integrations.
The SmartDesktop's UI components (the toolbar, window titlebars, etc.) are completely customizable - you can add, remove, modify, or change the theme of pretty much everything!
Questions? Want to see a demo or custom POC? Drop us a line at support@finsemble.com! We'd love to hear from you!