Rectangle is an advanced UI component provided by SAP Crystal Dashboard Design (Xcelsius) in the category of “Arts and Backgrounds”. Generally speaking, you can use it to define canvas layout such as dividing it into several parts and defining the canvas border, as displayed in Figure 1 below.
Figure 1. Use Rectangles to divide canvas and define borders.
As you can see from this figure, two Rectangle components are used to divide the canvas into 2 parts for a Label and a Pie chart, and another Rectangle is used to define the canvas size.
In this post I’d like to introduce another interesting usage of Rectangle, by configuring it as the background of your dashboard. In this way you can quickly make your design better-looking and more professional with the help of a simple Rectangle component, as illustrated below:
Figure 2. A simple background represented by a Rectangle component.
You may think that this can be easily achieved by using some Background component. However, you will soon find out that no Background component provided by SAP Crystal Dashboard Design (Xcelsius) itself can do the same thing. Traditionally, you may achieve this by first drawing such an image with some complex software such as PhotoShop, then placing an Image Component onto the canvas and importing the image, and finally resizing it to make it look like the background of yourdashboard. Compared to this, using a Rectangle is much easier to do and to maintain.
By the way, maybe you have noticed that Iam using “SAP Crystal Dashboard Design (Xcelsius)” instead of “Xcelsius”. The reasonis that SAP has just rebranded Xcelsius. This post applies to any Xcelsiusedition with Rectangle available, including SAP Crystal Presentation Design(for Xcelsius Present), SAP Crystal Dashboard Design, personal edition (forXcelsius Engage) and SAP BusinessObjects Dashboard Design (for XcelsiusEnterprise). In this post we will use SAP Crystal Dashboard Design (Xcelsius)to refer to the product.
Briefly, the steps to use a rectangle as your dashboard background are as follows.
1. Drag a Rectangle component from “Art and Backgrounds” category in Components view and drop it to the canvas. Resize it according to your needs so that it’s just large enough to hold all the UI components of your dashboard.
2. Click to open the Property panel of the Rectangle component.
a) Uncheck “Enable Border” so as not to display borders, as we will use it as the background.
b) The Fill type is “None” by default. In our case, select “Linear(gradient)” or “Radial(gradient)” from thedrop-down list.
More property items become available. For example, if “Linear(gradient)” is selected, the Property panel is as displayed below:
Figure 3. Properties needed to use a Rectangle as a background.
c) Add more colors along “GradientPreview” and adjust them. How to do this will be illustrated later.
3. Click “Fit Canvas to Components”to trim off the extra unwanted spaces.
Now let’s see what we can do in step 2 c). If “Linear(gradient)” is selected, the color of each division of the rectangleis changing linearly between every 2 color points, from the left to the right. By default there’re 2 color points in “Gradient Preview”, one at the leftmost and the other at therightmost, corresponding to the colors of the Rectangle component at the leftmost and the rightmost.
To change the color of a certain color point, click the buttonbelow the color bar in Gradient Preview to select it, and then click the color picker to choose a different color. For example, to make the rectangle change from white to black, click the first color point and change it to white, as illustrated in Figure 4 below:
To move a color point, click on the color point button and hold your mouse to drag it left or right to your desired position.
To add more color points, click on the color bar below “Gradient Preview”, and specify its color through the color picker. For example, if you want the rectangle area to change linearly from white to black and then to white, from left to right, you can
i) First, click on the color bar to add a point, and click the color picker to adjust its color. In our case, click the middle of the color bar and set it to black.
ii) Second, click on the last color point on the color bar (on therightmost) and change its color to white.
iii) Third, click on the second color point and drag it to the center.
The Rectangle and its Property panel is now as displayed in Figure 5:
Similarly, you can add as many color points as you wish and specify their colors. The rectangle is then divided by those points into several areas. The color of each area changes gradually and linearly from the color of the lefter color point to that of the righter one. For example, after adding two more color points to the rectangle and configure the colors, the rectangle now looks as displayed in Figure 6: Figure 6. Linear gradient with 2 more color points added.
In this figure, the first and the last points are black, the center point is white, and the other 2 are of a different color, somewhat blue.
When adding more points to the rectangle, you’d better make them symmetrical for a consistent look and feel. As you can see from figure 6, the 2nd and the 4th points are of almost equal distance from the center.
You may have tried but failed to find a way to delete any existing color point. Well, I don’t know why, but you can move one color point to be overlapped with another and change the color accordingly, which has the same effect as deletingit. That color point is not actually deleted – you can still drag it out.
You can also set rotation angle through the Rotation spinner so that the coloris not changing horizontally, the rotation angle of which is 0 degree. This is also a very interesting and attractive feature and I like it very much. For example, when setting Rotation angle to 45 degrees (by entering 45 in thespinner component), the rectangle will be like as displayed in Figure 7. You can compare it with figure 6 to see the effect of Rotation angle.
Figure 7. Linear gradient with a rotation degree of 45.
If you want to make the white space in the center to be larger, you can add 1 or more color points to each side of the center point and set their colors to be the same as that of the center point,which is white. For example, you can add 2 more color points surrounding the center point and make them all of color white, as displayed in Figure 8:
If you want to adjust the width of each color space, you can move any of the color points under Gradient Preview to see the change.
For each color point, you can adjust its Transparency level to make its color lighter or deeper. You may want to do this for a smooth transition from one color to another.
That’s all for Linear(gradient). On the other hand, if you choose Radial(gradient), the color is not changing linearly from left to right (with a rotation angle of 0 or more), but radially from the center to the borders. Consequently, the color points you added to the color bar below Gradient Preview don’t map to the rectangle from left to the right, but from the center point to the border. That’s, the first color point, which is on the leftmost of the color bar, indicates the color not of the leftmost border of the rectangle but of its center. In addition, you may have already noticed that Rotation is not available for Radial(gradient).
Figure 9 below shows an example ofRadial(gradient):
Figure 9. Radial gradient with 4 color points.
As you can see in the canvas, the center area is black defined by the first color point. It gradually changes to yellow radially from the center, which is defined by the second color point. Then it changes again from yellow to red radially, which is in turn defined by the third colorpoint. Finally, it changes from red to white, as defined by the last color point.
In this short post we have seen what we can do with a Rectangle component and how. Hope it’s helpful during your dashboard development using SAP BusinessObjects/Crystal Dashboard Design.