OL Learn

Dynamic replace of detail table element

Hey guys/grls

I have some example detail table (dynamic table) generated based on detail record from data mapper.

REC1 123 23424
REC2 123 23424
REC3 123 23424

I would like to create condition which will replace

value based on data mapper field.

For example if field == REC1 then

will contain some other information, if REC2 then other.

What is the best way of doing that?

Hello,

For myself I use a variable to extract the value REC1 inside a script step, then I compare the value in a condition step and finally use extract step to fill the field.

In my situation I have “DetailService” and inside my detail service I have for example “DetailDetails”

And I would like to access field “Indicator” from “DetailDetails”

var field, result = "";

results.each(function(index)
{
var serviceLen = record.tables.detailS.length;

for (var i=0; i< serviceLen; i++ ) 
{
	var detaillen = record.tables.detailS[i].tables.detailDetails.length;
	for (var j=0; j< detaillen; j++ ) 
	{
		var indicator = record.tables.detailS[i].tables.detailDetails[j].fields.Indicator;
		
		if(indicator == "D") 
		{
			logger.info("indicator" + indicator);
			//query('.containerRow').css("display", "none");
			//query('.detailRow').css("display", "table-col");
			query('.detailRow').css("color", "green");
		}
		else if(indicator == "DH") 
		{
			logger.info("indicator" + indicator);
			//query('.detailRow').css("display", "none");
			//query('.containerRow').css("display", "table-col");
			query('.containerRow').css("color", "red");
		}
	}

	
}

});

//results.html(result);

I am generating detail table and for example want to change color of table record based on indicator field.

It changed to green, not to red.

Any ideas what doing wrong?

Hi @Odyn,

Can you please tell what the selector is of your Standard Script? And is the results.each() function meant for the detail table "detailS " or for the nested detail table detailDetails? Because in that case I suppose that you can skip one index because you do already have a index value: “results.each( function (index) {…”

This should be used on nested DetailDetails table.

I would like to grab Indicator field from there and later check value for “D” or “DH”

Based on that later append

records.

I am using class of

as selector

@Odyn, Can you please share which selector you’re using for the shared Standard Script? Is that for example “.containerRow”? Please note that in that case always the value of the “Indocator” field of the last record of the nested detail table “detailDetails” will be applied.

This is my script currenty: (Corrected it a bit)

And also the HTML piece:

<tr class="detailRecord detailDLine" data-repeat="detailS.detailDetails">
            <!--  <td id="lineItemID" class="detailRow" data-field="LineItem">@LineItem@</td>-->
            <td id="indicatorID" class="detailRow" style="display: none;" data-field="Indicator">@Indicator@</td>
            <td id="lineItemID" class="detailRow" data-field="LineItem">@LineItem@</td>
            <td id="serviceDescID" class="detailRow" data-field="ServiceDescription">@ServiceDescription@</td>
            <td id="finalDateID" class="detailRow" data-field="FinalServiceDate">@FinalServiceDate@</td>
            <td id="woID" class="detailRow" data-field="WR1WorkOrderNumber">@WR1WorkOrderNumber@</td>
            <td id="qtyID" class="detailRow" data-field="TargetQty">@TargetQty@</td>
            <td id="unitID" class="detailRow" data-field="Salesunit">@Salesunit@</td>
            <td id="rateID" class="detailRow" data-field="Rate">@Rate@</td>
            <td id="finamNetID" class="detailRow" data-field="FinalNetAmount">@FinalNetAmount@</td>
            <td id="asteriskID" class="detailRow" data-field="AsteriskField">@AsteriskField@</td>
        </tr>

Hi @Odyn,

But this is a completely different script. Are you able to replace a value based on a record field by making use of this script? Because this script will hide the current TR-element when the indicator is equal to “DH”.

Yes, I am able doing this already with colors, Colors was just for testing. It looks like this now:

results.each(function(index)
{
// get hidden indicator from

column
var indicator = this.children()[0].text();
		if(indicator == "D") 
		{​​
			//this.css('display', 'table-col');
			this.css('background-color', 'green');
		}
		else if(indicator == "DH") 
		{
			//this.css('display', 'none');
			this.css('background-color', 'red');
		}

});

And my colors:

The trick in that was to pass hidden column indicator into detail table columns as first item [0].
Later I am extract this as a text() inside my script.


Now I would like to switch between two

elements.

For example I have

and

Do I need two sciprt to toggle between that?

I want to display 1 type of

depending of indicator value like “D” or “DH”

A option is to add the “#detNumItemID” TD-element at the beginning of the first TR-element and use for example the following if-elseif statement:

if (indicator == "D") {
	this.children()[0].remove();
} else if (indicator == "DH" {
	var tdElement = this.children()[0];
	
	tdElement.attr("colspan", "10");
	this.html(tdElement);
}

Please note that in this case it’s inportant to remove the attribute “colspan” from the specific TD-element and it’s also important that the indicator field does only contains the value “D” or “DH”.

Thank You Marten, I made something similar then Yours.

  1. Now insde my dynamic table i have

    record with some class.
  2. My template script use selector “detais” class

  3. Inside

    record have multiple types of columns. (Depends of record type and Indicator it will be different)
  4. I set additional class to each

    element like “hideDLine” which have inside display:none
  5. I created following script to switch record in dynamic way:

    // this script will be executed for each record from recordset
    results.each(function(index)
    {
    // get hidden indicator from

    column
    var indicator = this.children()[0].text();
      	// for record type D we will display records
      	if(indicator == "D") 
      	{​​
      		this.children().removeClass("hideDRecord");
      		this.css('background-color', 'lightgreen');
      		
      	}
      	// for DH record type (Detail Header)	
      	else if(indicator == "DH") 
      	{
      		// we want to extract container location for DH record
      		var containerLocation = this.children()[10].text().trim();
      		
      		// if container location is empty
      		if(containerLocation.length == 0) 
      		{
      			// we will add the only space
      			this.children()[10].html("&nbsp;"); 
      		}
      		​​
      		this.children().removeClass("hideDHRecord");
      		this.css('background-color', 'lightblue');
      		
      	}		
      	// for DP record type (Detail Pricing)	
      	else if(indicator == "DP") 
      	{
      		​​
      		this.children().removeClass("hideDPRecord");
      		this.css('background-color', 'lightyellow');
      		
      	}
    

    });

    So in general words it will remove class which hide record when proper record will be found with proper indicator.

1 Like