cancel
Showing results for 
Search instead for 
Did you mean: 

Color Coding a status report

Former Member
0 Kudos

Hi All,

Is there a way in web dynpro to color code some values retrieved from a RFC call?

For example, say I have a BAPI that returns a status code in a table structure in the form of a character.

'R' - Red, 'Y' - yellow and 'G' -Green. In the web dynpro I loop thru the table to find out how many red, green and yellows have been returned, eg. R = 3, Y = 5 and G = 9.

Can I then show like a color coded progress bar with the actual colors in web dynpro?

Like so, RRRYYYYYGGGGGGGGG, with the letters being the actual colors? Can this be done?

Any suggestions will be greatly welcomed. It doesn't have to be exactly like above.

Thanks

TM

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi Tony,

I'm new, so feel free to use my approach or not.. 😃

I'd first, define three Context Attributes, Red, Yellow, Green (These will reffers to amounts).

You can even, do the sum once, using an Action. You would need to iterate over your table, accessing the Fields and counting by yourself, like:


if ("RED".equals(modelProperty))
  red++
if ("YELLOW".equals(modelProperty))

You can also use a switch case if you preffer. You will have the amount of each element in your Value Attributes at that time.

You can define another three Attributes, RedWidth, YellowWidth, GreenWidth, they will be calculated and return type string.

These calculated attributes will:

- Access each value Node, for its color;

- Multiply that guy for any other number you want (to increase width);

- Return Width + px to View

In the View, declare some Images, Red, Yellow, Green colors. I think you can do a 1px image and just resize on the property in runtime. You can define the height in Web Dynpro Layout, no worries. Put them all in a line, with no spaces between each other.. it should look like a bar I think. Remember that we can't manipulate HTML / JS in Web Dynpro (not at least NW04s I think) - so, don't expect some fancy fancy stuff.. 😃

Whenever you change the Node (which you put your calculated attributes in) it will update the values, and return new widths.

The second way to do this is, instead of calculating the value in an Action, calculate the value directly in the Calculated Attribute, (iterating thru the main model node, for each respective color) - It will be a bit slowly, however, less nodes are required. You can probably choose what's best for you.

The code itself shouldn't be that hard. Tell me if you need any more information on how to do the stuff.

Regards,

Daniel

Edited by: Daniel Ruiz on Mar 23, 2009 11:44 PM

Edited by: Daniel Ruiz on Mar 23, 2009 11:47 PM

Former Member
0 Kudos

Hi Daniel,

Thats a very interesting approach. Do you think it might be performance intensive as we keep loading images for each specified color? Can you give me more details please? Algorithms etc?

Thanks.

Vishwas,

I dont think business graphics will quite do the biz, as I will be presented with excess information in the form of an x- y- axis which is redundant and space consuming. Also, its not so easy to color coordinate things in the business graphic.

Thanks for your responses.

TM

Former Member
0 Kudos

Hi,

They are loaded once. All you need to do is change the width property. So it will appear longer or shorter, depening on the parameter.

It should be very lightweight. What part you didn't understand?

It should look like this:


- Context
  - Bars (Node)
    - GreenAmount (integer)
    - YellowAmount (integer)
    - RedAmount (integer)
   - GreenImage (string) - calculated!
   - YellowImage (string) - calculated!
   - RedImage (string) - calculated!

In the Layout, create three Images. One for each color, you can create an Image using Paint or anything like that. 1px x 1px should be OK.

You will Bind the width attribute of each, to its Image Nodes attribute.

You can have a multiplier in the View, as a constant:


public static final int WIDTH_MULTIPLIER = 3;

For each attribute, a function like this should be written:


public String getGreenImage(Element ...) {
    int greenAmount = wdContext.nodeBars().currentBarsElement().getGreenAmount();
    return (greenAmount * WIDTH_MULTIPLIER) + "px";
}

Everytime you change the values inside the Amount attributes, the widths will get refreshed.

Hope it's more clear now.

Regards,

Daniel

Edited by: Daniel Ruiz on Mar 26, 2009 3:04 AM

Former Member
0 Kudos

Hi Daniel,

A few questions....will the images reside in the mimes folder under components?

What UI element will best hold the images, text view? How do I load these images?

Also, if I already create the jpg images to be 20x20px, then I can just load them without worrying about how to scale them to display them right? 1px by 1px is rather tiny on a 1024x768 resolution!

Also, I was thinking that I need to keep this bar a uniform length. So I will have to create an algorithm to calculate it as a percentage rather than actual RYG values otherwise the bar might get really long!

Can you help me with these things, in the meantime I will also do some research so I can try this out. I can visualize it and I'm very excited!!!!

TM

Former Member
0 Kudos

Hi,

You can use src / mimes / Components / [ComponentName] / [ImageName] - You dont need to use Context Nodes, I think you can user SRC property of the Image Element.

It works like this, if you wanna have a solid bar, which is actually just one color, you can create a 1x1px image filled with that color for that. If you want some shadows, you need 1px width and the height whatever you want.

You will be changing in the Runtime the width attribute of that Image. If you need all the bar to be like 1000px, you can easily find porcentages doing some basic calculation.

IE:

RedAmount + GreenAmount + YellowAmount = Total Amount

RedPercentage = (RedAmount * 100) / TotalAmount

You can use this percentage for example in your Image, if you want.. but you need to replace the "px" to "%" when returning the String back to the View.

You can have a Transparent Container, holding these three Images inside it. You can use a fixed width in the container, and use width percentages for each Image based on the math above.

Hope it helps,

Regards,

Daniel

Answers (2)

Answers (2)

Former Member
0 Kudos

Hi

That was great, if you want to place a image as part of table instead of the back end table text u can place my using mimes directory of your DC,

once you place th images in mimes folder, you need to insert the image as part of your column instead of adding a text view,

after adding the image to column, you need to create a value attribute for the image under your table source node and, you can set the image name to that value attribute and bind the attribute to the image source and alt properties.

while setting the value to attribute you need to specify the image file extension

Exam:

wdThis.currentnodeElement().setnameImage(R+".bmp");

if the file extension is bmp then you need to specify as bmp.

May be it will help you

0 Kudos

Tony,

Consider SAP Business Graphics to show a graph for your data. Take a look at following resources.

[Using Business Graphics|https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/user-interface-technology/wd%20java/7.0/ui/using%20business%20graphics.pdf]

[BusinessGraphics API|http://help.sap.com/saphelp_nw70/helpdata/en/3e/c450c4cf2f6d418204afeea17655d3/frameset.htm]

Hope this helps.

Vishwas.