Solution Manager 7.1 Return of the widget - Code in additional systems

[TomCenens]

On popular demand:

How do you add multiple SAP systems to the Solution Manager 7.1 – Technical Monitoring widget? I gave away some hints in the original blog post: “Solution Manager 7.1 Return of the widget” but still many questions came in my direction on how to exactly go about changing the widget.

In this example I show you have you can end up with seven managed SAP systems. I don't know if there is any upper limit in terms of how many you can add so you can follow these steps & change them to your liking in order to add <n> number of managed SAP systems.

So here we go:

Call up the System Monitoring widget, right click & choose Widget Preferences

In the preferences, you only have 5 input fields to insert managed SAP systems.

So this is the first place where we have to make a change in order to allow more inputs to be given to the widget.

Open up Main.kon with notepad ++ (or another editor)

If you look for “FavoriteSystem” you will soon notice XML that is related to the five input fields.

Copy one block (not the last one) & insert it twice

Change the <name> of the copied blocks as shown above into FavoriteSystemFive & FavoriteSystemSix

Rename the last block from FavoriteSystemFive to FavoriteSystemSeven

To check the result, zip your folder back into a zip file and rename it to .widget ~use another name than the original widget.

Now open up this widget with the Yahoo Widget Engine

Right click and navigate to preferences

So we have two additional input fields. It’s not very clean yet because the * text is displayed twice but we’ll fix that in a second.

You can use the find in files function in notepad ++ to detect other spots in the coding where FavoriteSystem is used

One of the first hits is in controller.js

Here you can see where the “Enter at least” text is coming from on the Fifth system. Since we added two more systems, we now change FavoriteSystemFive into FavoriteSystemSeven

Pack the widget back in, run it to check and you now see the text “*Enter …” is only displayed on the last system in the preferences.

Moving forward, the next “hit” on FavoriteSystem is still in controller.js

Here add  && ( preferences.FavoriteSystemSix.value == 00) && ( preferences.FavoriteSystemSeven.value == 0) before the last )

Result

Moving forward, the next “hit” on FavoriteSystem is in Model.js

We are not going to change line 155 – 159 or add lines since this is purely commented code //

So we end up on line 166 in Model.js

Before line 180, add two blocks for six & seven

Result

Pack in, load widget again

You can see now that we have more than five systems!!!

But as you can see, the widget seems to be too small.

Two options, we can increase the widget pane and we can let the widget “scroll” by adding lines to the table.

C:\widget\sysmon\SAP System Monitor.widget\Contents\components\Main\js\view\view.js

Adjust the line for(var j=0; j<5; j++) into (var j=0; j<7; j++)

The screenshot above also represents the result!

Main.kon defines the main widget pane so we have to take a look there :smile:

C:\widget\sysmon\SAP System Monitor.widget\Contents\Main.kon

In Main.kon we see a <height> tag for the mainWindow so this looks like the value we need. So we have enlarged the “placeholder” of the content by 138 pixels (original value was 262).

In the config.xml file that accompanies the “skin” of the widget, you also have height values which define the height of the respective rows.

To add some height here, we add 30 pixels to tools_height (from 255 to 285) and we add 30 pixels to <row height=”160” /> which makes us end up with the above result <row height="190" />

Again pack up & widget it

Voila, you now have more than five systems configured, seven to be accurate.

You don’t see all seven in above screenshot because I didn’t enlarge the pane to display them all. The bar on the bottom indicates you can scroll up / down to display the system(s) that are not visible at first sight. In order to scroll click next to the System Monitoring header and then you can just mouse scroll up & down the list.

Of course you can also enlarge the widget further if wanted using the instructions in the blog post (if you want to avoid scrolling).

Have fun!