nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Add Item in DCT

Bhargav Coca

TS6.5 SP2 on Windows.

I was wondering, if it is possible to create a Customizable table with out use of replicants.

I want a scenario where i have 2 fields to start with for #Rows and #columns, when i enter a number event is triggered and Fields with label of "Row1" "Row2" "Row3"........"RowN" are visible, similarly if i say M columns it should give M fields with labels of "Column1" "Column2" "Column3"...."ColumnM".

Is this kind of setup even possible? Please advice.

Thank You

Find more posts tagged with

Comments

Adam Stoller

TS6.5 SP2 on Windows.

I was wondering, if it is possible to create a Customizable table with out use of replicants.

I want a scenario where i have 2 fields to start with for #Rows and #columns, when i enter a number event is triggered and Fields with label of "Row1" "Row2" "Row3"........"RowN" are visible, similarly if i say M columns it should give M fields with labels of "Column1" "Column2" "Column3"...."ColumnM".

Is this kind of setup even possible? Please advice.

Thank You

"thinking out loud" ... a replicant for the rows would be helpful, but failing that, you would have to define the maximum size table you want to support in terms of the cells (column/row pairs) and then use FormAPI to hide/expose fields based on what is selected in real-time.

Using a single replicant for rows - you would define the maximum number of columns ahead of time and then use FormAPI with an onReplicantAdded handler to expose the column-number of fields per row-replicant -- and if you want to limit the number of rows dynamically, an onReplicantBeforeAdd handler to prevent adding more rows than the number which had been previously selected.

You could do it with two replicants (rows -> cols) but then you get into some potentially weird semantics of having one row with N cols and another row with M cols - so a single replicant solution is probably better.

The biggest problem is getting the stuff to line up nicely in the DCT form - if you use the single-replicant solution, I believe you could use row-continue="t" on all of the col items and the end of the replicant would force the end of the continuance. If you try to do it without a row-replicant I think it would be difficult (if not impossible) to get it laid out nicely because I don't believe there is any [supported] mechanism to adjust the row-continue attribute of items via FormAPI.

As I said, the above is just "thinking out loud" - but hopefully it will help as a foundation to resolving your issue.

Bhargav Coca

I already implemented one table with Replicants, Now i am doing this long process of defining maximum number of rows and columns as fields and then using form api to hide and show rows and columns acordin to the number specified by the user. My JS doesn't seem to work the way i wanted it to. can anyone point out where i am going wrong.

Thank You
[html]
################JS#############################

IWEventRegistry.addItemHandler("/NOR", "onItemChange", Display1);
IWEventRegistry.addItemHandler("/NOC", "onItemChange", Display2);

function Display1(count1){
var rowcount = count1.getValue();
alert (rowcount);
for(i=0;i<=rowcount;i++){
IWDatacapture.getItem("/Row").setVisible(true);
IWDatacapture.redraw();
return false;
}
}

function Display2(count2){
var columncount = count2.getValue();
alert (columncount);
for(i=0;i<=columncount;i++){
IWDatacapture.getItem("/Column").setVisible(true);
IWDatacapture.redraw();
return false;
}
}
[/html]

Adam Stoller

Please provide more information

There may be other questions, but those should do for a start.

Bhargav Coca

Please provide more information
Do the alerts show up?
Do they look correct?
Do you have a max number of rows and columns defined somewhere?
Are the items actually hidden by default? (it might be easier to start from the count value and iterate to the max value setting the fields to be hidden ...)
There may be other questions, but those should do for a start.

Yes i get the alerts
Yes they look correct
Starting off i am not defining Max Rows and Columns. I am aware of what is the max number for both my columns and rows.

All i am concerned here is my iteration, i guess my iteration is not correct fro some reason.

My row names are Row1,Row2,Row3....RowN and my column names are Column1, Column2, Column3, ...... ColumnN

So my iteration for Row or for Column is not correct.

Any suggestions here please.

Thank You

Adam Stoller

Yes i get the alerts
Yes they look correct
Starting off i am not defining Max Rows and Columns. I am aware of what is the max number for both my columns and rows.

All i am concerned here is my iteration, i guess my iteration is not correct fro some reason.

My row names are Row1,Row2,Row3....RowN and my column names are Column1, Column2, Column3, ...... ColumnN

So my iteration for Row or for Column is not correct.

Any suggestions here please.

Thank You

So instead of

  IWDatacapture.getItem("/Row").setVisible(true);

which indicates that Row is a replicant container - I believe you need something like:

  IWDatacapture.getItem("/Row" + i).setVisible(true);

  IWDatacapture.getItem("/Row" + i + "").setVisible(true);

Bhargav Coca

I tried what you have said, that doesn't seem to work. Also i was wondering how to implement colspan and rowspan? I guess i have to give more thought.

[html]
IWEventRegistry.addItemHandler("/NOR", "onItemChange", Display1);
IWEventRegistry.addItemHandler("/NOC", "onItemChange", Display2);

IWDatacapture.getItem("/Row1").setVisible(false);
IWDatacapture.getItem("/Row2").setVisible(false);
IWDatacapture.getItem("/Row3").setVisible(false);
IWDatacapture.getItem("/Row4").setVisible(false);
IWDatacapture.getItem("/Row5").setVisible(false);
IWDatacapture.getItem("/Row6").setVisible(false);
IWDatacapture.getItem("/Row7").setVisible(false);
IWDatacapture.getItem("/Row8").setVisible(false);
IWDatacapture.getItem("/Row9").setVisible(false);
IWDatacapture.getItem("/Row10").setVisible(false);
IWDatacapture.getItem("/Row11").setVisible(false);
IWDatacapture.getItem("/Row12").setVisible(false);
IWDatacapture.getItem("/Row13").setVisible(false);
IWDatacapture.getItem("/Row14").setVisible(false);
IWDatacapture.getItem("/Row15").setVisible(false);
IWDatacapture.getItem("/Row16").setVisible(false);
IWDatacapture.getItem("/Row17").setVisible(false);
IWDatacapture.getItem("/Row18").setVisible(false);
IWDatacapture.getItem("/Row19").setVisible(false);
IWDatacapture.getItem("/Row20").setVisible(false);
IWDatacapture.getItem("/Row21").setVisible(false);

function Display1(count1){
var rowcount = count1.getValue();
alert (rowcount);
for(i=0;i<=rowcount;i++){
IWDatacapture.getItem("/Row" + i + "").setVisible(true);
IWDatacapture.redraw();
return false;
}
}

function Display2(count2){
var columncount = count2.getValue();
alert (columncount);
for(i=0;i<=columncount;i++){
IWDatacapture.getItem("/Column" + i + "").setVisible(true);
IWDatacapture.redraw();
return false;
}
}
[/html]
Thank You

Adam Stoller

I tried what you have said, that doesn't seem to work. Also i was wondering how to implement colspan and rowspan? I guess i have to give more thought.

[html]
IWEventRegistry.addItemHandler("/NOR", "onItemChange", Display1);
IWEventRegistry.addItemHandler("/NOC", "onItemChange", Display2);

IWDatacapture.getItem("/Row1").setVisible(false);
IWDatacapture.getItem("/Row2").setVisible(false);
IWDatacapture.getItem("/Row3").setVisible(false);
IWDatacapture.getItem("/Row4").setVisible(false);
IWDatacapture.getItem("/Row5").setVisible(false);
IWDatacapture.getItem("/Row6").setVisible(false);
IWDatacapture.getItem("/Row7").setVisible(false);
IWDatacapture.getItem("/Row8").setVisible(false);
IWDatacapture.getItem("/Row9").setVisible(false);
IWDatacapture.getItem("/Row10").setVisible(false);
IWDatacapture.getItem("/Row11").setVisible(false);
IWDatacapture.getItem("/Row12").setVisible(false);
IWDatacapture.getItem("/Row13").setVisible(false);
IWDatacapture.getItem("/Row14").setVisible(false);
IWDatacapture.getItem("/Row15").setVisible(false);
IWDatacapture.getItem("/Row16").setVisible(false);
IWDatacapture.getItem("/Row17").setVisible(false);
IWDatacapture.getItem("/Row18").setVisible(false);
IWDatacapture.getItem("/Row19").setVisible(false);
IWDatacapture.getItem("/Row20").setVisible(false);
IWDatacapture.getItem("/Row21").setVisible(false);

function Display1(count1){
var rowcount = count1.getValue();
alert (rowcount);
for(i=0;i<=rowcount;i++){
IWDatacapture.getItem("/Row" + i + "").setVisible(true);
IWDatacapture.redraw();
return false;
}
}

function Display2(count2){
var columncount = count2.getValue();
alert (columncount);
for(i=0;i<=columncount;i++){
IWDatacapture.getItem("/Column" + i + "").setVisible(true);
IWDatacapture.redraw();
return false;
}
}
[/html]
Thank You

Right off the bat - the above will fail because your loop starts at 0 and your items start at 1 - fix one or the other and try again.

Bhargav Coca

Thanks for pointing that out. I am now good with columns and rows. I am thinking about a logic to implement rowspan and colspan.

And i donnot have any logic as how to implement that. Can anyone trow light or just an idea as how we can implement that?

Thank You
Bhargav

Adam Stoller

Thanks for pointing that out. I am now good with columns and rows. I am thinking about a logic to implement rowspan and colspan.

And i donnot have any logic as how to implement that. Can anyone trow light or just an idea as how we can implement that?

Thank You
Bhargav

I already indicated that you can do it more easily (perhaps just "do it") if you put the columns in a replicant of rows - as each replicant is "ended" it should negate the row-continue attribute of each of the column elements in the replicant. - e.g.:

Rows: 5
Cols: 3
Row1: {
- col1:rowcontinue="t", col2:rowcontinue="t", col3:rowcontinue="t"
}
Row2: {
- col1:rowcontinue="t", col2:rowcontinue="t", col3:rowcontinue="t"
}
Row3: {
- col1:rowcontinue="t", col2:rowcontinue="t", col3:rowcontinue="t"
}
Row4: {
- col1:rowcontinue="t", col2:rowcontinue="t", col3:rowcontinue="t"
}
Row5: {
- col1:rowcontinue="t", col2:rowcontinue="t", col3:rowcontinue="t"
}

Your only other [reasonable] alternative is to find a way via Javascript to modify the row-continue attribute value in real-time, but I'm not sure how to do it as there's no officially supported API for it

Bhargav Coca

Adam, I am still not clear about this. You mean to say that i will display columns in a row depending on number of columns and rows being a "Replicant".

So i need to call a Replicant function to add new replicants depending on # of rows right??

Please advice.

Thank You

Adam Stoller

Adam, I am still not clear about this. You mean to say that i will display columns in a row depending on number of columns and rows being a "Replicant".

So i need to call a Replicant function to add new replicants depending on # of rows right??

Please advice.

Thank You

You would probably need two event handlers for the same item - (I don't have my docs handy right now - so take the following with a grain of RTM):

You will probably have to create another one or two functions (perhaps being able to reuse some code) that will get called during init() to ensure that the proper number of columns are hidden/exposed in each existing instance of the row replicant when a new or existing DCR is rendered via the DCT.The column items - which are all pre-defined to some maximum before-hand - can all have the rowcontinue="t" attribute set so that they appear in one line (allowing for wrapping depending on the width of the window, the width of each column field and the number of said column fields) - I'm pretty sure the end of one row replicant instance / beginning of another row replicant instance will effectively terminate the rowcontinue effect.

Bhargav Coca

Can you help me with some logic here. I am deviating from what is required.


IWEventRegistry.addItemHandler("/root/NOR", "onItemChange", Display1); 
IWEventRegistry.addItemHandler("/root/NOC", "onItemChange", Display2); 

  IWDatacapture.getItem("/root/Row[1]").setVisible(false);

function Display1(count1){
var rowcount = count1.getValue();
alert (rowcount);

    var controlledItem = IWDatacapture.getItem("/root/Row);
    var children = controlledItem.getChildren();

for(i=1;i<=rowcount;i++){
        var replicantInstance = children;
    IWEventRegistry.addItemHandler("/root/Row", "onReplicantBeforeAdd", insertOverride);
  return false;
}

function insertOverride(replicantContainer, i)
{   
        replicantContainer.addInstance(i);
    }

    return prepend;
}

I have a "Row" replicant with columns in it with rowcontiue="t" set.

Thanks

Adam Stoller

Can you help me with some logic here. I am deviating from what is required.


IWEventRegistry.addItemHandler("/root/NOR", "onItemChange", Display1); 
IWEventRegistry.addItemHandler("/root/NOC", "onItemChange", Display2); 

  IWDatacapture.getItem("/root/Row[1]").setVisible(false);

function Display1(count1){
var rowcount = count1.getValue();
alert (rowcount);

    var controlledItem = IWDatacapture.getItem("/root/Row);
    var children = controlledItem.getChildren();

for(i=1;i<=rowcount;i++){
        var replicantInstance = children;
    IWEventRegistry.addItemHandler("/root/Row", "onReplicantBeforeAdd", insertOverride);
  return false;
}

function insertOverride(replicantContainer, i)
{   
        replicantContainer.addInstance(i);
    }

    return prepend;
}

I have a "Row" replicant with columns in it with rowcontiue="t" set.

Thanks

Why are you adding an item handler within Display1 instead of within init()?

What exactly are you trying to do within Display1 and Display2?

Why does insertOverride have no conditional code within it and seems to be returning an undefined variable?

I suggest you think a bit more about what you are trying to do - design it / spec-it-out - and then try writing the code again. Then if you're still having problems post - but hopefully by then it will be more specific, detailed questions instead of something that looks like it's a request for someone to write your code for you.

Bhargav Coca

Thanks Adam, I am trying to make this work, not relying on anyone though. I have my Row getting added depending on the number of Rows needed (NOR). Now i am trying to setVisible to Columns depending on the number of columns entered (NOC). My Logic is lost here, can you guide me as how can i make coulmns invisible inside each instance depending on NOC

[html]
IWEventRegistry.addItemHandler("/root/NOR", "onItemChange", Display1);

IWDatacapture.getItem("/root/Row[1]").setVisible(false);

function Display1(count1){
var rowcount = count1.getValue();
alert (rowcount);

for(i=1;i<=rowcount;i++){
IWDatacapture.getItem("/root/Row").addInstance(i);
}

}

[/html]

This is my column part.

[html]
IWEventRegistry.addItemHandler("/root/NOC", "onItemChange", Display2);

function Display2(count2){
var columncount = count2.getValue();
alert (columncount);
var RowsNum=IWDatacapture.getItem("/root/NOR").getValue();
alert ("ROws are:" + RowsNum);
for(j=0;j<=RowsNum;j++){
var rowitem=IWDatacapture.getItem("/root/Row["+ j +"]");
for(k=0;k<=columncount;k++){
rowitem.getItem("/Column" + k + "").setVisible(false);
}
}
}
[/html]

Is the column part anywere closer to be right?

Thank You

Adam Stoller

Thanks Adam, I am trying to make this work, not relying on anyone though. I have my Row getting added depending on the number of Rows needed (NOR). Now i am trying to setVisible to Columns depending on the number of columns entered (NOC). My Logic is lost here, can you guide me as how can i make coulmns invisible inside each instance depending on NOC

I don't have the time to work through your code right now - but here's the gist of what I believe you need:

There might be a few more pieces needed to "glue" everything together - but that's basically it.I strongly recommend working it out on paper first by "playing computer" - you have a bunch of moving pieces and that kind of thing can greatly simplify figuring out gotchas before you spend a lot of time writing the code.