In Netsuite, the #list loop for the item table will only render as many line items as there are number of of items. For example, if there's two items in a Sales Order, there will be only two line items in the PDF template as rendered by this example code:
<#if record.item?has_content>
<table class="itemtable" style="width: 100%;"><!-- start items -->
<#list record.item as item>
<#if item_index==0>
<thead>
<tr>
<th align="center" colspan="1">${item.quantity#label}</th>
<th align="center" colspan="2">${item.item#label}</th>
<th align="center" colspan="3">${item.description#label}</th>
<th align="center" colspan="1">Unit Price</th>
<th align="center" colspan="1">U/M</th>
<th align="center" colspan="1">${item.amount#label}</th>
</tr>
</thead>
</#if>
<tr> <!--Move itemtable row up slightly to remove white space-->
<td align="right" colspan="1">${item.quantity}</td>
<td colspan="2"><span class="itemname">${item.item}</span></td>
<td colspan="3">${item.description}</td>
<td align="right" colspan="1">${item.rate?string.currency}</td>
<td align="center" colspan="1">${item.units}</td>
<td align="right" colspan="1">${item.amount?string.currency}</td>
</tr>
</#list><!-- end items -->
</table>
</#if>
I have been following this official documentation for adding striping to line items in PDF templates https://docs.oracle.com/en/cloud/saas/netsuite/ns-online-help/section_N2866065.html
Whereupon you add this to of the items:
<tr style="background-color: ${((item_index % 2)==0)?string('#ffffff', '#ccffcc')};">
I need to extend the #list loop so a few "empty" rows with alternate striping are added to the bottom of the line item table:
Striping of line items with alternate background colors + extended
My use case has different number of line items for each order, otherwise I would just hard code three alternate colored rows myself. Thank you!
You could just add some extra items to the list like <#list record.item + [{}, {}, {}] as item>. Then you need an #if that checks if item?has_content, and if not, then render a <tr> with one big spanning td, (unless in reality you need to handle null item.quantity, etc., in which case you don't need this extra #if).
As of using % for coloring, I don't know how many years the Netsuite FreeMarker is behind (except that a lot), but for a long time there's a feature like ${item?item_cycle('#ffffff', '#ccffcc', '#ffccff') in FreeMarker. If they don't yet have ?item_cycle, then I suggest writing a #function that returns the color code based on item_index (and that function will use index % 3 and #if-#elseif-#else, and #return inside).
Another possibility is just maintaining a counter yourself, so it can be independent of #list. Like <#assign rowCount = 0>, and then before each item you do <#assign rowCount++>. But I guess extending the list with empty items is nicer.
Related
I wish to print out information which record on Lot number Record of the Item on the BOM(Bill of Materials).
My codes are as following but it's only shows the header with no values.
<table class="itemtable" style="width: 100%; margin-top: 10px;"><!-- start items.number --><#list record.item as itemnumber><#if itemnumber_index==0>
<thead>
<tr>
<th align="center" colspan="3">Gross Die</th>
</tr>
</thead>
</#if><tr>
<td align="right" colspan="4">${itemnumber.custitemnumber_gross_die}</td>
</tr>
</#list><!-- end items.number --></table>
show custom field (gross die),which located on Lot number record of lot-number item, value on printed BOM.
I'm trying to create a table in Angular with a dynamic number of columns and rows. I've found this easy to accomplish using the HTML table element by doing something like this:
<table class="html-table">
<tr class="headers">
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th *ngIf="columns == 4">Species</th>
</tr>
<tr>
<td>Ryan</td>
<td>30</td>
<td>M</td>
<td *ngIf="columns == 4">Human</td>
</tr>
</table>
In this example there might be some button that toggles the value of columns between 3 and 4.
Every explanation I have looked at online involves changing CSS variables, which seems like a somewhat hacky way to accomplish something that should be simple. Is there some way I can specify that something should be a new column in CSS grid rather than that having to specify the number of columns in grid-template-columns?
In Angular you can use ng-repeat to have a dynamic table
A typical example could be
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat="data in datas">
<td title="Title_Of_First_Variable">{{data.variable1}}</td>
<td title="Title_Of_Second_Variable">{{data.variable2}}</td>
<td title="Title_Of_Third_Variable">{{data.variable3}}</td>
...
</tr>
</table>
Of course with your controller you should pass your dynamic data into the correct $scope, in this case should be $scope.datas (usually an object)...maybe something like this, using NodeJS:
$http.post('route_of_your_method')
.success(function (result) {
$scope.datas = result;
})
.error(function (err) {
...
});
I explained fastly but i hope this is enough
I am display large set of data content in table using ng-repeat and it contains only one <tr> element. I am trying to display odd row in one color and even row in another color. I am not getting how to display the striped color for single row by making use of ng-repeat. Please let me know where I am going wrong.
HTML:
<thead class="rowhead">
<tr>
<th class="mid">Sl.</th>
<th id="tnm">Name</th>
<th class="mid">Age</th>
<th class="mid">Members</th>
<th class="mid">View-content</th>
<th class="mid">on-going-Process</th>
</tr>
</thead>
<tbody ng-repeat="info in cspinfo">
<tr class="clr">
<td>{{$index+1}}</td>
<td id="bnm">{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.member}}</td>
<td>{{info.View-content}}</td>
<td>{{on-going-Process}}</td>
</tr>
</tbody>
You can directly select the odd and even rows of table using the selector in css and apply style you need. You don't have to worry about the applying class to each row you create using ng-repeat.
tr:nth-child(odd){
background-color: #yourcolor
}
tr:nth-child(even){
background-color: #yourcolor
}
Here you can read more about css selectors https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
In your css define a rule for the style. Then in your html:
<tbody>
<tr class="clr" ng-class="{style-created: $index % 2 === 0}" ng-repeat="info in cspinfo">
<td>{{$index+1}}</td>
<td id="bnm">{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.member}}</td>
<td>{{info.View-content}}</td>
<td>{{on-going-Process}}</td>
</tr>
</tbody>
I have table without any class or id (there are more tables on the page) with this structure:
<table cellpadding="2" cellspacing="2" width="100%">
...
<tr>
<td class="cell_c">...</td>
<td class="cell_c">...</td>
<td class="cell_c">...</td>
<td class="cell">SOME_ID</td>
<td class="cell_c">...</td>
</tr>
...
</table>
I want to get only one row, which contains <td class="cell">SOME_ID</td> and SOME_ID is an argument.
UPD.
Currently i am doing iy in this way:
doc = Jsoup.connect("http://www.bank.gov.ua/control/uk/curmetal/detail/currency?period=daily").get();
Elements rows = doc.select("table tr");
Pattern p = Pattern.compile("^.*(USD|EUR|RUB).*$");
for (Element trow : rows) {
Matcher m = p.matcher(trow.text());
if(m.find()){
System.out.println(m.group());
}
}
But why i need Jsoup if most of work is done by regexp ? To download HTML ?
If you have a generic HTML structure that always is the same, and you want a specific element which has no unique ID or identifier attribute that you can use, you can use the css selector syntax in Jsoup to specify where in the DOM-tree the element you are after is located.
Consider this HTML source:
<html>
<head></head>
<body>
<table cellpadding="2" cellspacing="2" width="100%">
<tbody>
<tr>
<td class="cell">I don't want this one...</td>
<td class="cell">Neither do I want this one...</td>
<td class="cell">Still not the right one..</td>
<td class="cell">BINGO!</td>
<td class="cell">Nothing further...</td>
</tr> ...
</tbody>
</table>
</body>
</html>
We want to select and parse the text from the fourth <td> element.
We specify that we want to select the <td> element that has the index 3 in the DOM-tree, by using td:eq(3). In the same way, we can select all <td> elements before index 3 by using td:lt(3). As you've probably figured out, this is equal and less than.
Without using first() you will get an Elements object, but we only want the first one so we specify that. We could use get(0) instead too.
So, the following code
Element e = doc.select("td:eq(3)").first();
System.out.println("Did I find it? " + e.text());
will output
Did I find it? BINGO!
Some good reading in the Jsoup cookbook!
Something I've recently discovered is that I can set a table cell to have multiple axises using a combination of the headers property on the td and the axis property on any related th. Example:
<table>
<caption>Country Toy Codes</caption>
<thead>
<tr>
<th scope="col row"></th>
<th scope="col" id="us" axis="country">US</th>
<th scope="col" id="ca" axis="country">CA</th>
<th scope="col" id="uk" axis="country">UK</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="robots" axis="toys">Robots</th>
<td headers="us robots">ABC</td>
<td headers="ca robots">DEF</td>
<td headers="uk robots">GHI</td>
</tr>
<tr>
<th scope="row" id="dolls" axis="toys">Dolls</th>
<td headers="us dolls">JKL</td>
<td headers="ca dolls">MNO</td>
<td headers="uk dolls">PQR</td>
</tr>
<tr>
<th scope="row" id="slinkys" axis="toys">Slinkys</th>
<td headers="us slinkys">STU</td>
<td headers="ca slinkys">VWX</td>
<td headers="uk slinkys">YZ1</td>
</tr>
<tr>
<th scope="row" id="legos" axis="toys">Legos</th>
<td headers="us legos">AB1</td>
<td headers="ca legos">CD1</td>
<td headers="uk legos">EF1</td>
</tr>
</tbody>
</table>
This has clear benefits for non-visual browsers, but I was thinking it could also be useful for javascript and css. The only problem is that I'm not seeing a way to directly access the axis type of the header id of the cell, either after selecting or for selection purpose.
Ideally, I would like to do either of the following (rough pseduo-code ahead):
Selector:
td['axis=toys'] // Would select all td's with a header id that resolves to a header having axis value "toys"
Getter:
$('td').axisValue("toys") // would return the value, if applicable, of header id of header value with axis value of toys.
For the getter, I could loop through each header each time and find the element from the id in the DOM and then the axis value, but if there is a way to do this more directly, I'm sure it's also more optimized by the browser.
For the selector, the closest I can think of (in js) is to take the given axis value, find all ids using that axis value and then comma-separate each option to grab them all, such as
[headers~=us], [headers~=ca], [headers~=uk]
Does anyone know if header id's axis name is available either via a method or directly on the td element?