Colour report rows that contain the same product name - oracle-apex

I have a list of products and I am trying to alternate the colour between each product (grey, white, grey, white, and so on). I understand how to use colour formatting based on a condition such as the following link: example followed. However I dont know how to get it to look at the previous line on the report and check whether it holds the same product name. If it does, then colour the row the same colour, else the alternate colour.
I've setup an example report in the application: Application 67666 - Colour Row by Product example. I have two products in the report so I'm trying to get 3 grey lines and then 3 white lines, if I had more products it would then go back to grey and so on.
Link:apex.oracle.com
workspace: apps2
user: user
password: DynamicAction2
Please could I be directed in the right direction, JavaScript and Dynamic Actions shout out to me as in the example link however its looking at the previous row which is getting me all stuck.

I can't think of another solution than javascript really. There is possibly using lag in the sql, but only to use it to determine where the row color should change. You could use the value of the column in a html expression of a column and put it in a class, but you still need to iterate over it with javascript anyway. So it seems less fiddly to just use javascript.
Inline CSS:
table.report-standard tr.normalRow td{
background-color: green;
}
table.report-standard tr.altRow td{
background-color: red;
}
This will override the default style, but you will need to tune this to your demands. For example, the color change on :hover of the row. I prefer steering the style through assigning classes and then define the rules in css than to directly assign css through javascript (which would place it in style tags, ugh).
Dynamic action: change row colour
After Refresh, Region, Product Report
True action: execute javascript code, fire on page load checked
$('td[headers="PRODUCT"]', this.triggeringElement).each(function(){
var lCurrRow = $(this).closest('tr'),
lPrevRow = lCurrRow.prev(),
lPrevVal = lPrevRow.find('td[headers="PRODUCT"]').text();
console.log(lPrevVal + ' - ' + $(this).text());
//if value on previous row differs from the that on the current row
//then change the class
//if the value didnt change, then use the same class as the previous row
if ( lPrevVal != $(this).text() ){
if ( lPrevRow.hasClass('normalRow') ){
lCurrRow.addClass('altRow');
} else {
lCurrRow.addClass('normalRow');
};
} else {
if ( lPrevRow.hasClass('normalRow') ){
lCurrRow.addClass('normalRow');
} else {
lCurrRow.addClass('altRow');
};
};
})
Check your solution on apex.oracle.com, I implemented it there.

Related

Qt trying to enable scrolling slightly beyond last element in QTableView

I'm making a sort of an Excel-type application in which I can load a tab-delimited text file and I am able to edit cells... etc
It's useable but I have an issue related to me allowing the user to "freeze" a number of columns/rows. ("Frozen" rows/columns can only be one of the first ones and are then "frozen", i.e. always displayed even when scrolling)
The whole frozen Col/Row is working but I would like the user to be able to scroll slightly past the last Col/Row in order to be able to only ever display full cells.
Right now when reaching the end of the scrollbar I end up with a partial leftmost column and topmost row because it's only displaying up to the last full col/row and not going a wee bit further for all content to be displayed fully.
I've tried doing adding some space to the maximum scrollbar value once everything is loaded in the table but it seems to have no effect :
table->horizontalScrollBar()->setMaximum(table->horizontalScrollBar()->maximum() + t->horizontalScrollBar()->singleStep()*2);
I tried multiple values too.
(Edit) There may be some Qt code that "snaps" the QTableView viewport back to the edge of the last cell automatically...
(Edit2) I connected verticalScrollbar's rangeChanged() signal to a custom slot with the following code:
void MyTableView::onRangeChanged(int min, int max) {
QScrollBar *sender = verticalScrollBar();
int newVMax = max + 20;
sender->blockSignals(true);
sender->setRange(min, newVMax);
sender->blockSignals(false);
}
Sadly there is definitely a snapback mechanic when scrolling to the end of verticalScrollbar...
Gif of snap back issue
(Edit3) The snap back may be related to:
void QHeaderViewPrivate::setScrollOffset(const QScrollBar *scrollBar, QAbstractItemView::ScrollMode scrollMode)
{
Q_Q(QHeaderView);
if (scrollMode == QAbstractItemView::ScrollPerItem) {
if (scrollBar->maximum() > 0 && scrollBar->value() == scrollBar->maximum())
q->setOffsetToLastSection();
else
q->setOffsetToSectionPosition(scrollBar->value());
} else {
q->setOffset(scrollBar->value());
}
}
mainly:
if (scrollBar->maximum() > 0 && scrollBar->value() == scrollBar->maximum())
q->setOffsetToLastSection();

Google Sheet Conditional Formatting highlight 2 columns if one column contain certain text of 5 columns

In Google Sheet, I want to highlight only 2 columns out of 5 columns.
5 columns here but I want to highlight only 'Name' and 'Weight' columns if a cell contain the word 'Smith'
The outcome should be like this.
I want to input more name and if the name contain the word 'Smith', I want it to be automatically highlighted for name and weight columns.
I tried to use conditional formatting in Google sheet, and I could highlight only the name column.
This is what I tried.
Outcome was this.
You are not far, try the following formula in the conditional formatting:
=IF(REGEXMATCH($C3, "Smith"), 1, 0)
The formula given by #nabais works.
In conditional formatting though one does not need to use the starting IF function.
"Format cells if" is how conditional formatting rules are formed by default as noted in the official help page.
Create a rule.
Single color: Under "Format cells if," choose the condition that you want to trigger the rule. Under "Formatting style, choose what the
cell will look like when conditions are met.
Color scale: Under "Preview," select the color scale. Then, choose a minimum and maximum value, and an optional midpoint value. To choose
the value category, click the Down arrow Down Arrow.
So the following formula is all that is needed:
(Please adjust ranges to your needs)
=REGEXMATCH($G2, "Smith")
You can try the following code:
function highlight() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var data = ss.getRange('A1:E').getValues();
for (i = 1; i < data.length; i++) {
var tf = ss.getRange("B" + i).createTextFinder('smith');
tf.matchEntireCell(false);
tf.matchCase(false);
var result = tf.findNext();
if (result !== null) {
var range = result.getRow();
ss.getRange('B' + range).setBackground('Yellow');
ss.getRange('D' + range).setBackground('Yellow');
}
};
};

How can I set the color of a specific line in a libgdx list?

I am developing a list and I want to highlight certain lines by showing the font color in red. Is this possible?
EDIT:
Ok, here a simplified version of my code:
Skin defListSkin = new Skin(Gdx.files.internal("data/uiskin.json"));
List listHistory = new List<String>(defSkin);
// Here I set the general font color for the list
List.ListStyle listStyle = listHistory.getStyle();
listStyle.font = fontList;
listStyle.fontColorUnselected = Color.LIGHT_GRAY;
listHistory.setStyle(listStyle);
String[] items = new String[20];
// Example of item[]
// item[0]: "John 12"
// item[1]: "Amy -3" <-- I want certain lines to appear in red (e.g. those with negative numbers)
// Populate the list
listHistory.setItems(items);
// Drawing the list (actual draw happens in render() of course)
Table myTable = new Table();
myTable.add(listHistory);
stage.addActor(myTable);
Use the Color Markup Language that Libgdx supports.
The markup syntax is really simple but still versatile:
[name] Sets the color by name. There are a few predefined colors, see the Colors.reset() method for an exhaustive list. Users can define their own colors through the methods of the Colors class.
[#xxxxxxxx] Sets the color specified by the hex value xxxxxxxx in the form RRGGBBAA where AA is optional and defaults to 0xFF.
[] Sets the color to the previous color (kind of optional end tag)
[[ Escapes the left bracket.
Markup is disabled by default. Use the public member font.getData().markupEnabled to turn it on/off.
Reference: https://github.com/libgdx/libgdx/wiki/Color-Markup-Language
If you want a more complex html like markup you can use those templates: https://github.com/czyzby/gdx-lml, live tests: http://czyzby.github.io/gdx-lml-tests/
I know what you mean, and I don't think it is possible. The list items are all linked to the same listStyle, and the only way to change the color of the list items is to make a new style for listHistory and change the font color of this style, however if you do this, it changes every item in the list to that new font color. My suggestion would be to create two separate lists and two separate ListStyles and the lines you want red be in one list and have one style and the lines you don't want to be red be in another list and have a different style. Hope this helps

How do I remove the value label from a Google Visualizations gauge?

I'm using the Google Visualizations gauge on a page, but it's important that the value its displaying is not shown as a label right below the needle.
I've found two ways of doing this. Once you navigate through the DOM to the gauge widget, and navigating into the SVG pieces, you can either set the textContent element to be an empty string, or you can delete that whole text label entity, entirely.
function removeLabel(widget) {
var gauge_label_parent = widget.getElementsByTagName("g")[1];
var gauge_label = gauge_label_parent.getElementsByTagName("text")[0];
gauge_label.textContent = "";
// Another way of getting rid of the text: remove the element
// gauge_label_parent.removeChild(gauge_label);
}
The problem is: both of those techniques work only on the first time. If I re-draw the gauge with updated values, then the label re-appears, and trying to remove the label element or set textContent="" does nothing.
So, instead of just being able to update the value with:
data.setValue(0, 1, newValue);
chart.draw(data, options);
I have discovered that I have to change the options a little bit, like:
data.setValue(0, 1, newValue);
options.minorTicks = 3; // Change the options somehow
chart.draw(data, options); // Tell gauge to draw that
options.minorTicks = 2; // Change the options back to what they were
chart.draw(data, options); // Draw again
Here's a fiddle to see how it works or doesn't. Set the fixLabel to true or false depending upon whether you want the label problem to be present or not. Keep in mind that the label will (properly) be missing the first time. It re-appears when you update its value.
http://jsfiddle.net/jemenake/72dMt/2/
So, a few questions:
Any idea why it's doing this?
Is there a way to remove the label without having to go through this option-changing business?
Bonus question: Am I unclear about how minorTicks is supposed to work, or is it broken? The docs say that it's supposed to be the number of minor ticks between majors, but setting it to 2 gives me only 1 minor tick, 3 gives me 2, etc. And, if I set it to 0 or 1, I get "Problem parsing d=''" in the console.
Adding to Madthews answer:
To those of you who are trying to remove the label from the Google Gague Chart.
If you add the following code into your page (i have placed it in the header to keep things tidy) then you can set the font size of the Label to whatever you want.
<style>
* {text-rendering: optimizeLegibility; font-size:100%;}
svg g g {font-size:0px;}
</style>
I have been toying around with this for a while now and the top line of the css above is essential otherwise it will not work!
Ok I'll try to answer:
1) Label options are not managed by current API release
https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge
Workaround: try with this CSS
svg g g {
font-size:0px;
}
http://jsfiddle.net/Madthew/72dMt/17/
Above fiddle explains you the meaning of the minorThicks. It's correct that if you set 2 you get 3 "spaces". Minor thicks represent the number of "BLANK" spaces between two major thicks. In the example you will se the perfect matching between your arrow and the thin line representing the minor thick.
Instead of messing with styles, you could just insert the value with a blank formatted field.
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Unitless Indicator', {v:counter, f:''} ]
]);
This also works with addRows.
jsfiddle here: https://jsfiddle.net/08x2m4vo/2/
Use this. This is also labelled by Google.
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['', {v: <Your_own_value_of_the_gauge_meter>, f: ''}],
]);
In place of "<Your_own_value_of_the_gauge_meter>" use your value variable. That's it.
What about this?
['Label', 'Value'],
['', 80]

MSchart label inside chart area

Can somebody please tell me how can i show the Total Collection on MSChart
You can use chart.Annotations property to get a similar result.
For example with the following code (located after filling the chart):
var ann = new RectangleAnnotation();
ann.Text = "Total Collection" + Environment.NewLine + "250 Billion";
ann.IsMultiline = true;
ann.AxisX = this.chart1.ChartAreas[0].AxisX;
ann.AxisY = this.chart1.ChartAreas[0].AxisY;
ann.AnchorX = 9; // as you can see from the image below,
ann.AnchorY = 41; // these values are inside the range
// add the annotation to the chart annotations list
this.chart1.Annotations.Add(ann);
I got the following result:
N.B.:
there are a lot of annotations types (CalloutAnnotation, EllipseAnnotation...) and they have a lot of properties to change styles and behaviors. You can even set a property to allow annotation moving (i.e. AllowMoving=true).
Have a look to annotation properties through intellisense or MSDN.
You can set the property IsDockedInsideChartArea to true. You will also need to specify which ChartArea the legend is docked to, and set the position property to Auto.
legend.IsDockedInsideChartArea = true;
legend.DockedToChartArea = "ChartArea1";
There are more information about this and other legend properties here.