Can this UI rendering can be created in DynPro?

[Former Member]

Hello,

I would like to create the following UI:

A table which will contain X Rows.

Each row has a title and a liitle triangle at it's side. Pressing this triangle will open Y Rows, pressing the triangle again will hide these rows and show the title again.

I know this view can be created in .NET environment, my question is if it can also be created using the DynPro UI tools.

Roy

[Former Member · Accepted solution]

Hi Roy,

If u have say three Radio Buttons a,b,c...

In the value node create three attributes keytoselect A,keytoselect B,keytoselect C and assign each one to the key to select of each RB a,b,c.

Create one more attribute in the value node called selectedKey and assign this to the selected Key of all the three RB(a,b,c).

Regards

Bharathwaj

Message was edited by: Bharathwaj R

[Former Member]

Hi Roy,

Where do i send it..email id ?

When each row has its own selected key and key to select attributes it wont affect..

Regards

Bharathwaj

[Former Member]

Hi Roy,

I have tried the scenario. Its working with the idea i had suggested. Since each row will have one selected key attribute it will satisfy ur requirement.(No of key to select will be equal to the no of radio button) Go through my previous post and if u cant still get it i can send u that sample project..But it is not that complex.

No run time assignment required..

Regards

Bharathwaj

Message was edited by: Bharathwaj R

[Former Member]

u can do that using a UIElement in Table.

in table uielement Insert MasterColumn -> TreeByNestingTableColumns.

create a node that should contain a recursive node.

now in TreeByNestingTableColumns property, map the necessary fields like :

childrenLoaded - tells if the children are loaded.

expanded - if the node is expanded.

isLeaf - whether its the last node.

with the value attributes in value node.

now create an event and map it to onLoadChildren property. and include a parameter of type NodeElement in the onActionEvent()

eg: public void onActionTestLoad(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, com.satyam.treetable.wdp.IPrivateTreeTableView.ITestElement element )

populate the table with initial values by creating node elements of the node in doInit() or supplyFuction().

the triangles that u where talking about are created automatically.

onclicking the triangle onLoadChildren is called. create node elements and add it to the invoking element.

now the sub nodes are populated under this invoking element. clicking on the triagle helps you to expand and collapse the subnodes.

write this code in "wdDoModifyView()"

if(firstTime)

{

IWDTreeByNestingTableColumn uiElement = (IWDTreeByNestingTableColumn) view.getElement("MasterColumnID");

ele.mappingOfOnLoadChildren().addSourceMapping("path","element");

}

hope this might help you.

note: make sure, after populating the subnodes make the childrenLoaded of the invoking element as true.

regards,

Piyush.

[Former Member]

Hi Roy,

I will tell u what i have understood.

Assuming there are 5 rows and 5 columns.

Each row will have more than one column with a radio button.

You want each row to have one selected key .

Then create the selected key attribute in the value node itself and bind it.That way each row will have one selected key which is common for all the RBs in that row.

Regards

Bharathwaj

[Former Member]

Hey Bharathwaj,

Yes you understood me correctly. Now how Do I do that?

[Former Member]

Hi Roy,

Bind keytoSelect and selectedKey to string attributes.

Selectedkey of all the radio buttons should be bound to a single context attribute.

Otherwise we cant select or toggle the RB's.

SelectedKey will give the KeytoSelect 's value of the selected radio button

Regards

Bharathwaj

[Former Member]

But again this way all the table will be bound to a singel selectedKey and I want each row to have a different selected key since each row represents new selection.

[Former Member]

Oh and by the way, I aam using Radio buttons and not Check Boxes...

[Former Member]

yes you can add radiobutton through tablecelleditor

[Former Member]

Roy,

There is some missunderstanding: every row <b>will</b> contain individual <b><i>selection</i></b> in corresponding node element (see my previous post in this topic). Or you need individual <b><i>set of options</i></b> for every row???

VS

[Former Member]

Hello Vaklery,

I would like that the whole table (which contains X rows and Y coloums) will contain radio buttons but each row will represent a single group of selection

[Former Member]

This is why I think your procedure above will not work...

[Former Member]

But options in one group are all the same in __every__ row or different?

VS

[Former Member]

Let me be more specific:

The table should be a worker evaluation table.

Each row represents an evaluation parameter which can be: Excellent, Very Good, Poor ect. These values are at each coloum header.

A user should be able to select at each row (which represents a single evaluation parameter) one grade (Excellent, Very Good, Poor ect).

[Former Member]

Ok, then applying this to my example:

1. Node in context (cardinality 1..1, selection 1..1) is Grades, with attributes Excellent (="Excellent"), VeryGood (="Very Good") etc

2. Your table node say has the following structure

EmployeeSkills

-- SkillName

-- Grade

3. Now in table you create columns with radio button cell editors, you are assignin keyToSelect property to Grades.Excellent, Grades.VeryGood et. (btw, you may just statically type this values with no binding and ommit step 1)

4. Also selectedKey property of every radio button is bound to EmployeeSkills.Grade attribute

VS

[Former Member]

But again, this method will cause a selection in a certain row to apply for the whole table and not just for this specific row. Or am I missing something here...?

[Former Member]

See, the selectedKey is bound to table node attribute, namely EmployeeSkills grade. So it would be repeated for every row (1 row == 1 skill)

VS

[Former Member]

According to my understanding, each row needs to have it's own selectedKey, but I don't see it reflects in your solution. In my opinion this can be done only on runtime since at design time I can only bind the designed row (and therefore the whole created rows) to the same selectedKey.

[Former Member]

I have implemented your suggestion and as I thought: If I select a skill in a row and then another one in a row below, the previous selection is being deleted....

[Former Member]

Roy, check binding of selectedKey -- if it's really bound to table node (0..n) attribute, then everything work.

VS

P.S. Just found an interesting article how to use non-system-wide proxy for URL connection. Check your thread on Java forum.

VS

[Former Member]

Valery/Baharathwadj,

Can I send you my project for you to see it? I'm a bit lost here... And I'll check the arcticle later, 10X

[Former Member]

Valery/Baharathwaj,

It is working!

while (true)

{

System.out.println("10q very very much!!!");

}

I really appriciate all your help and support at this post, if I could I'd give you as much points as this loop goes...

I think my main misunderstanding here was the cardinality and the selection, I don't think I deeply understand what it means and this is the key issue here right?

[Former Member]

Hi ,

You might be binding the node to value node. In that create a attribute of type boolean and set its value to false for all the elements.

Bind it to keytoselect property of RB.

Then create a context attribute outside the node and bind it to the selected key

This will store the value of the RB selected.

Regards

Bharathwaj

[Former Member]

1. Which type the selectedKey should be?

2. All the Radio buttons should be bound at their selectedKey to the same context attr right?

[Former Member]

And another problem: Each row should have different selectedKey, if I bind it on design time it will bind the whole table. How do I bind each row to a different selectedKey on runtime?

[Former Member]

hi,

i think it'll work like this.

right click your table uielement and insert table column. then right click your table column and then insert tablecelleditor, then you'll get a list of uielements you can choose. from that choose radio button. then create two context attributes 'keytoselect' and 'selectedkey' and bind them to the keyToSelect and selectedKey property of the radio button. please make sure that the 'keytoselect' and 'selectedkey' context attributes are created under the node you have created for the table. When you set the other attributes of table node also set the value of 'keytoselect' attribute.

IPrivateTestView.ITable2Node tnode2 = wdContext.nodeTable2();

IPrivateTestView.ITable2Element telem2 = tnode2.createTable2Element();

telem2.setName("rahul");

telem2.setKeytoselect("r");

tnode2.addElement(telem2);

IPrivateTestView.ITable2Element telem3 = tnode2.createTable2Element();

telem3.setName("piyush");

telem3.setKeytoselect("p");

tnode2.addElement(telem3);

now in the onSelect property of the radio button write a function. under that function get the value of 'selectedkey' and write the code for the action you want to perform when appropriate row of table is created.

hope this will work.

regards

Rahul.

[Former Member]

Hey Rahul,

10X for the advice and the code but it doesn't seem to work...

[Former Member]

Do the following:

1. In view context create node KeysToSelect with cardinality 1..1, selection 1..1 and supply function

2. In node KeysToSelect add N string attributes, where N is number of columns with radio button, let us name them for example (N=3) KeyToSelect1, KeyToSelect2, KeyToSelect3

3. Initialize attributes mentioned in supply function (create single element, set attributes and add it to node)

4. In table node (0..n) create string attribute SelectedKey

5. Create N columns with radio button cell editor.

6. For i-th column bind radio button keyToSelect attribute to KeysToSelect.KeyToSelect<i> attribute, also bind selectedKey to SelectedKey attribute of table node.

Done

VS

[Former Member]

Hi Roy,

There is no direct way to do it. But we can simulate it in a very similar way. Go to the table column 's table header ->property: image source ,add the traingle image.

In the table column define an action.

Create a context attribute of type integer and set it to the no of rows u need for the table.

IN modify view get the table element and set the property no of visible rows to the context attribute rows.

IWDTable t = (IWDTable)view.getElement("Table");

t.setVisibleRowCount(wdContext.currentContextElement().getRows());

To toggle the no of rows in each press ..on action of the table column

we can say

if(wdContext.currentcontextelement.getnoofreows() == 20)

{

set it to 5

}

else {

set it to 20

}

Regards

Bharathwaj

[Former Member]

1oq very much Bharathwaj.

And I another q if you don't mind.

Do you happen to know how do I create a table that each row will contain Radio buttons but in each row only one Radio button could be selected? In particular, How should the Context and the Table bindings should look like