Xcelsius Slide-Out Menu with Inovista

Today I’m going to show you a slide-out menu using the Inovista component suite. One key thing to note is that many of the ‘mobile’ components can add good value to your desktop dashboards. In trying to review what I’ve done in this example, I’ve found that there are a lot of details, so I’m going to summarize the process and provide the source file.

You can view this on the iPad by downloading the ‘Dash Reader’ app from Invoista. Then you load this URL. http://data-ink.com/dashboards/dashboards.xml

photo

Click on the image to see the desktop version in action.


Before we begin, the concept is simple. We create two images that will work as containers by using the Inovista background image window (in the Inovista SVG package). In the components settings, under Behavior>Location, you can adjust the relocation settings at run-time to animate movement. There are a few other tips that I will cover, but that is general principle. Because my example will also cover the Inovista app, I’m using a canvas size of 1024 x 718.

When building potential apps for the Inovista app reader, I like to add an advanced rectangle component to be used as my overall background color. This will allow me to link the background color to a HEX code in the model, making it easier to update and adding the ability to change the background color at run-time. The size of the displayed rectangle is defined in the properties, so you don’t have to make the actual component any larger than the default. You will see that I made my rectangle larger than the canvas size (1026 x 726) so it spills over the edges. I have found that this produces a better transition in the app when objects transition from “off-screen.” Of course this means that we will have scroll bars on the canvas… so on to the next step.
panels1

We add a Swipe Manager component (Inovista Mobile package). We are just going to use this component for it’s ability to suppress scroll bars in the window. This is both important because our background is potentially bigger than the canvas and because we are going to bump our main area off the screen when the slide-out comes in. In fact, I love the fact that when I use this, I can place components anywhere I want without the fear of being to close to the edges (for fear of random scroll bars). When configuring the component, turn off the swipe functionality for now and check ‘hide parent scrollbars’ on the behavior tab.

panels2

The bars image is loaded using the Inovista Advanced Image component, and using the behaviors it can now work as a button to toggle the panel on/off.

bars_icon

We will add an image that will comprise our main area, and is named ‘main background’ in my example. I created my image by using PowerPoint, and you can find that source file HERE: http://data-ink.com/wp-content/uploads/2013/12/Inovista_Design.zip

I used the transparent image on slide 3, right-clicked and saved it as a PNG. Then I added it to my dashboard with the Inovista background image window.
panels3

After you save the model, you can go to the General>Xcelsius Comps. properties to assign which objects will be bound to the image background. The advanced image will trigger the panel slide-out and I will cover in more detail below.

panels4

I continued on and did the same for my panel by using the gray area from the second slide.
panels5

In this step, we will also add the Mobile Options component to name the dashboard. This will be displayed in the application header on the mobile app. The component will be hidden at run time.
panels6

If you are building for the mobile app, you are more limited in your formulas, and truthfully the best way to get the performance that you are looking for while moving data around in the model, you will need to use the matrix data manager. It works similarly to the filtered rows options of the combo box, only without needing to hide the combo box somewhere.
panels8

These next couple of images show me adding the mobile list and mobile chart components. You will then assign these components to the background containers that we built in the beginning.
panels9

panels10

The key to moving everything is to have the background image windows tied to the points on the positions sheet. These would be the numbers at the top of the sheet in white, with the lower part in orange being where I hard coded the positions. Negative numbers mean that the objects will be positioned off-screen. On the control screen when we toggle the panel on and off, it changes the positions on these components. When linking the positions, on the Behavior > Location tab, you should hard code the starting x/y positions and link the relocation points to the values on the positions sheet. This is what animates the movement on the canvas.
panels11

panels12

In this particular example, I believed that I used an entry/exit effect on the panel so it has a slightly independent movement from the sliding of the main body. Again, here is the ZIP of the source files, and please contact me if you have any questions. http://data-ink.com/wp-content/uploads/2013/12/Inovista_Design.zip