Smart Desktop Quickstart

Before you begin, make sure to install Finsemble if you don't have it yet. See Installing Finsemble for details.

Add Some Apps

To add apps to your smart desktop use the Finsemble CLI. 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 app "Account Detail" url https://assets.finsemble.com/6.0.0/components/accountDetail/accountDetail.html
npx finsemble-cli add app "Account Statement" url https://assets.finsemble.com/6.0.0/components/accountStatement/accountStatement.html

You can install the CLI globally, but we recommend using local installations via npx to prevent version mismatches.

Now restart the smart desktop. You can use a keyboard shortcut CTRL+ALT+SHIFT+R. Our new apps are now available in the App Launcher menu. Launch a few, and test out the Smart Desktop's snapping and grouping features.

Adding Preloads

Inject Code

Window management is important, but where the Smart Desktop really shines is preloads. A preload allows us to inject logic into an existing Javascript app, augmenting or modifying its behavior. You can use preloads to deeply integrate an app into the rest of your Smart Desktop even when you don’t have access to the source code.

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"

We just created a new script called myFirstPreload.js.

Note Note: Security is an important consideration with preloads. Finsemble's security infrastructure has been rigorously engineered and professionally audited by a third party auditor to keep your data safe. Read more about security policies here.

Replace the the runPreload function with:

function runPreload() {	
   alert("Hello from a preload!");
}

For Webpack to detect our new preload, we need to restart the build by shutting down the Smart Desktop (or killing it at the command-line with CTRL-c) and running yarn start again. When it's up, launch an account detail app and see your new preload in action.

Integrating Apps with FDC3 Interop

The Smart Desktop includes an interop API that conforms to the FDC3 standard. You can use this API to integrate apps with minimal code. Let's use interop to automatically sync the Account Detail and Account Statement apps.

Replace the runPreload function in myFirstPreload.js with:

function runPreload() {	
   fdc3.addContextListener("customer", (context) => {
      window.displayCustomer(context.customer);	
   });
}

Restart the Smart Desktop, and launch both an Account Detail and Account Statement apps. Set them to the same linker channel and they'll automatically synchronize as you click through the accounts.

Linking Demo

Now you’re ready to try your own preloads. Have fun and build something cool.

Deploying

After you've got your Smart Desktop how you like, you can package it up into a custom EXE and deploy it to your users. The Smart Desktop has two parts: assets, hosted on a web server; and a runtime built on the Finsemble Electron Adapter.

To deploy the assets, build them in prod mode:

yarn build:prod

You can now host the assets on your web server. We also include a prebuilt Express server for you to try out. Let's start it up:

yarn server

The file configs/application/manifest-local.json controls where the runtime looks for the assets. It also controls lots of other important things. See the Config Reference for more. In our case, the dev and prod URLs are the same, but we recommend that you change them.

The runtime is deployed as an installer, packaged as an EXE. Let's make it now. In a separate terminal, run this command:

yarn makeInstaller:prod

It can take some time. When it’s done, inside ./pkg you'll find a new installer for Smart Desktop that you can distribute the same way you distribute other EXE's to your users. Try running it to install your custom Smart Desktop to your local machine.

Native Apps, Custom UI, White Labeling, and More

You’re now ready to learn about other features. Try to integrate a native desktop app. You can assimilate native apps directly for visual integration, or use our .NET or Java API's for deep logical integrations.

The Smart Desktop's UI components (the toolbar, window title bars, etc.) are completely customizable. You can add, remove, modify, or change the theme.

If you have questions, want to see a demo, or want to book a custom POC, contact us at support@finsemble.com! We’ll be happy to help.

See also

Integrating FDC3-compliant apps into a workflow using the FDC3 workbench

Installing Finsemble