Legacy version 6 documentation. View current documentation.Legacy version 6 documentation. View current documentation.
In this tutorial, we use the Smart Desktop Designer (SDD) to build a sample smart desktop. We then publish it, and deploy it on our own desktop.
Before you begin:
Important: You can just read the instructions here, but you will get more out of it if you open your own SDD and do the steps with me.
SDD is an app like any other, so you launch it the same way as you would other apps.
We are now ready to start creating our smart desktop.
At the heart of a smart desktop are apps that you can launch and set up to interact with one another. What apps to add depends on your specific business. Here, we will add 2 apps, one web-based and another that is a native or binary. You add them in a similar way.
Click Manage apps. The screen that appears lists the apps already added to your smart desktop. Unless you changed your setup, you can see the AG-Grid example blotter, the ChartIQ example app, and the FDC3 workbench. Let’s add some more.
First, let's add the Yahoo Finance website as an app:
You might notice some important points. First, we included the HTTPS protocol in our URL string. If you entered only finance.yahoo.com, Finsemble considers this invalid input. Finsemble needs to know whether you want to use HTTP or HTTPS. No other protocols are supported for web apps.
Second, we used finance.yahoo.com as our start URL, and this is the starting page for the app the users will launch. Depending on your specific situation you might decide that the trending tickets page or the stock market news page is more helpful to your users.
The final thing to notice is that Finsemble picks up on the name from the URL. Most of the time this works well, but occasionally you might want to rename the app. Since we didn’t when we added it, let’s do it now. Click the edit button next to the Yahoo app. In the Name field, enter Yahoo Finance and click Save. The name of the app in our list is now correct.
Let’s add a native app. Here, we add Notepad. Click +Add.
Click Select file.
Navigate to the location of the Notepad app and open it. Usually, this app is located at C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Accessories.
Under App name enter Notepad.
Click Save,
We now have 5 apps on our smart desktop.
Note: You can add native apps on Windows only.
So far, all the apps have default settings and therefore they behave the same way. We can change a lot of things about our apps by adjusting their settings. To do so, we need to edit an app. Let’s pick our Notepad. Click the edit button next to it in the app list, and then click Optional config settings.
Note: Use the Edit icon to change the app settings. If you click the app itself, Finsemble will launch it.
There are many config settings, and we won’t examine them all here. Instead, we set a few just to see how these settings work. If you want to learn more about each setting, see Manage apps.
Click the arrow next to Window position and dimensions. Let’s make the Notepad window smaller and square. We set both the width and the height to 500. Let’s also click Lock dimensions so that the user can't resize the window.
Next we specify the window position. You can’t specify the exact position for the app window, but you can pick a general area. You can choose the center of the screen, a specific corner, or an edge that will be the closest to your app window Click the down arrow for Position and from the dropdown pick top left. We can make one more change here. Drag the opacity indicator to 60%.
We’re done with window position and dimensions. Click Save.
Let’s test what we did so far. On the Manage apps page, click Notepad. It appears as a semi-opaque square in the upper right corner, exactly as we specified.
For more info, see Manage apps.
On the smart desktop there are 2 kinds of apps. The FDC3-compliant apps work together without you having to do anything other than having them join the same channel. Let’s try that.
For the non-compliant apps, you can make them compliant by modifying them, but this is out of scope for this tutorial. One possibility is using preloads. If you don’t do anything, the non-compliant apps can still participate in visual integration, but they won’t communicate with other apps by using FDC3.
You also can specify trust relationships between apps. For more details, see Interop and Controlling information flow.
You can change the look of your smart desktop to follow your tastes or your company’s branding guidelines. Since we are just playing, we will give our project a spring-like look. You can of course use your own favorite colors.
As you edit your desktop's theme, SDD reacts to your changes almost instantly. To see the results, it’s best to open an app and watch it change as you adjust various settings. If you don’t like what you see, you can tweak it in real time. We will use the Take a tour app as our preview.
Note: Although the SDD apps you added to your desktop and the rest of the Finsemble UI change their look as you apply various settings, the SDD itself doesn’t change.
Let’s see this in action. Under Templates, click Light theme and click Yes to confirm. The Finsemble taskbar and the Take a tour window now look much lighter and the text is black instead of white. But the demo inside the Take a tour app hasn’t changed. That’s because it is a recorded video rather than an app that Finsemble manages. Everything else in that window follows the lighter theme, as do all the other open windows other than SDD. The Finsemble toolbar also changed to reflect the new theme.
Now, we customize the look further. Click the color square for the primary font color. On the bar below, click in the green area. The square with colors now shows green. Find the shade you like and then click away from the square. The Finsemble taskbar now shows a green text, and the Take a tour app shows green content.
Note that the window title bar isn’t green. To change this text, we need to adjust the secondary font color. Let’s make that text yellow.
You can’t see it now because other elements are not displayed, but the changes we made also affect the dialog boxes. To see this, click Dark theme. The confirmation dialog that appears also has the new color scheme. Click Cancel to keep our theme.
We won’t go through all the possible configurations here. The steps we did should give you a good idea of what you can do with colors. You can change the bars, the background, buttons, and so on. But color isn’t the only thing you can customize. You can also change images, including the splash screen and various icons.
Let’s change the taskbar icon. To do so, you need to find a .png image you want to use as your icon, and store it on your machine. Now, under Taskbar icon, click Select file, navigate to your .png, and open it.
You can change other icons in the same way. For example, you can change the image that will appear as a splash screen during loading.
There is lots more you can do to customize the way your smart desktop looks. Play with different settings and discover the ones you like. When you’re done, move to the next section.
For more info, see Theme.
Finsemble provides the built-in menus: Finemble, Build a desktop, and Apps. They can be enough, but you are not stuck with just these. You can add your own. These additional dropdown menus are handy when your users need to perform different tasks, and each task needs its own set of apps. To help your users quickly find the apps they need, you can group them by task. It might also be helpful to put the same app on several menus.
Let’s change the taskbar icon. To do so, you need to find a .png image you like, and store it on your machine. Now, under Taskbar icon, click Select file, navigate to your .png, and open it.
There is lots more you can do to customize the way your smart desktop looks. Play with different settings and discover the ones you like. When you’re done, move to the next section.
Let’s add a menu that contains all the FDC3 apps we have: the chart, the blotter, and the workbench.
We now have the FDC3 apps menu next to the built-in Apps menu. Notice that the favorite app is still there, but it moved to the right. That’s because the menus are always grouped together.
To remove a menu that you no longer want, click the Delete icon next to it.
For more info, see Toolbar.
To make it easier on your smart desktop users, you really want to set up single sign-on (SSO) authentication. Currently SDD requires OAuth for this authentication. Keep in mind that we support many providers, but we don’t recommend one over another, so pick the one that you either already use, or that will work for your needs.
Note: Finsemble can support any auth with a custom component, but you can’t set it up in SDD.
Let's set up the authentication now. To make it easier, we prepopulated some fields for 2 common providers, Google and Salesforce. To set up any other provider, you need to provide the endpoint manually.
Here we will show you how to set it up using Google. The steps are similar for other providers.
If you have never set up OAuth, let’s do it together. We use Google as an example. If you already have done this, skip this section.
Keep in mind that each OAuth platform is different, and so the steps might also differ.
There are quite a few steps, but we will set up only the basics. You can configure all the other properties on your own later if you want, but you don’t need more for SDD.
Open the admin portal for you OAuth platform. Here, we open the Google developers console . You can do this by clicking https://console.developers.google.com/. The console opens the dashboard.
Click Create project. Give your project a name. I called mine SDDauth.
Next, go to the OAuth consent screen. If you’re curious, you can learn about OAuth from the documentation on the right.
For the user type, select Internal. Click Create.
Fill the App info:
The next step is to add scopes. Click Add or remove scopes. We will do only the essential scopes, ones that everyone typically needs. Select these:
Now on the left pane click Credentials. Click Create credentials, and from the dropdown select OAuth client ID.
Under Application client, pick Web application. For the name, type what you earlier chose for your app name. I used FinsembleSDD, so that’s the name I use here.
Under Authorized JavaScript origins, click Add URI. In the URIs field, enter http://localhost:3375.
Under Authorized redirect URIs, add http://localhost:3375/login and http://localhost:3375/logout. Click Create.
You will now see the dialog box that displays the client ID and secret. Copy these and save them for setting up authentication. You can also download these as a .json file if you want.
For more info, see Authentication.
Now that we are done with creating the desktop, we need to share it with others. We do so on the Finish tab. As you can see, there are 2 ways to share the project: packaging it for further development and for hosting, and publishing to the Cosaic cloud. Let’s do both of them in turn. We will package the project first, because we can do it all within SDD. The publishing and installing involves quitting Finsemble, so we do it last.
The project we’ve been working on is just a learning experience. In real life you will need to decide how to share the desktop you have created with others. Here are some pointers.
Package when:
Publish when:
With SDD you can create a basic project, but if you want to use more advanced features of Finsemble, you need to do some development work. Luckily, the developers don’t need to start from scratch. After you take your project as far as you can with SDD, you package it and pass the resulting .zip file to the dev team.
Make sure you’re happy with how your project looks and functions, because packaging is currently a one time operation. It’s like taking a snapshot. You can’t import it back into SDD, but you can edit the original project and re-package it later.
Caution: It is possible to tweak the project and package it again, but if you already gave the .zip file to your dev team and they did any work at all on it, they will need to reconcile what they did with the newly generated package.
We are only practicing, so we can package our project without worrying about further development.
For our purposes, we are done with packaging. In real life, you would share the contents of the Public folder with your dev team.
The other way to share our sample project is to publish it. You typically publish a project when it’s ready for others to use as is without further modifications. After we publish, we will then install it on our machine.
Caution: Always run only one instance of Finsemble to avoid interference issues.
There is much more to deployment than what we looked at here. For more information, see Deploying your smart desktop.
Now that you have gone through the process of using SDD to create a very basic smart desktop, you should feel comfortable creating your own.
Before you begin designing your smart desktop, you have some thinking to do. Here are some tips to help:
Now you’re ready to design your smart desktop. Have fun!
If you need help with this tutorial or want more info about SDD, contact your Cosaic sales rep.