Examples of Custom Queries

BLOMASKY

Before I re-invent what others might have, I have a need for a query with 3 text columns.
1 of them has a (small) fixed size, the other 2 can have a LOT of text, and I would like to have the text wrap to a 2nd (or 3rd) line.

Has anyone built something like this that looks fairly attractive?

Thanks
Bruce

customaware

Can you draw a picture Bruce?

pureist

Do you want the LOT of text to always be displayed, or only when either the row or first line of text is hovered/clicked?
or,
Do you want the LOT of text to be displayed as a floating box when either the row or first line of text is hovered/clicked, so that the row does not expand?

But at its most basic:

header HTML:
<div style="display: flex; color: white; padding: 6px; background-color: #337ab7;">
..<div style="flex: 0 0 90px; padding-right: 6px;">att1coltitle</div>
..<div style="padding-right: 6px; flex: 1 0;">att2coltitle</div>
..<div style="flex: 1 0;">att3coltitle</div>
</div>
NOTE: could use Class name in attributes above (instead of 'style='), but would be problem if properties that applied specifically to Instances were added to Classes

CSS: (can obviously be in a custom CSS file)
<style>
.qry1-instanceblock { display: flex; color: ; padding: 4px; border-bottom: 1px solid #cccccc; cursor: default; align-items: center; }
.qry1-attrib1 { flex: 0 0 90px; }
.qry1-attrib1, .qry1-attrib2 { padding-right: 6px; }
.qry1-attrib2, .qry1-attrib3 { flex: 1 0; }
</style>

instance HTML:
<div class="qry1-instanceblock">

..<div class="qry1-attrib1">
....{att1name}
..</div>

..<div class="qry1-attrib2">
----{att2name}
--</div>

--<div class="qry1-attrib3">
----{att3name}
--</div>

</div>

working demo:
https://www.w3schools.com/code/tryit.asp?filename=FEK5G5WTZJHN

tford

Excellent example!

I sure wish there was a way to use a traditional query + accomplish this type of display of text for a selected attribute! That would be the best of both worlds.

BLOMASKY

If I clicked the right buttons, there should be a screen shot attached.

BLOMASKY

ok, this one might fit.
It would be nice, if just like in FORMS, a query column could be a HTML column.

Wonder how hard that would be to do?

Bruce

BLOMASKY

Thanks. That is VERY helpful. Gives me a good starting point.

Of course, if you or any others, have some examples that can help us "CSS CHALLENGED" people to build better looking queries, then I will personally thank anyone who uploads them.

(Might even buy them an adult beverage at the next Aware Conference! ok, 2 adult beverages!)

Bruce

BLOMASKY

I LOVE Flex.. .didn't know about this.. but my question is.

When I put the style in the query ie
<style>
.qrycol1 { flex: 0 0 90px; }
</style>

this works fine
but when I put the .qrycol1 line in my CSS, it is not found. Do I need a diff. class name?

Thanks
Bruce

johntalbott

As an alternative, you could use a standard grid query and use CSS to make it look like the screenshot.

customaware

BLOMASKY wrote
ok, this one might fit.
It would be nice, if just like in FORMS, a query column could be a HTML column.

Wonder how hard that would be to do?

This is a Custom Query embedded in a BO Form Bruce.... the bit in the red box.
Is that what you mean?

BLOMASKY

Thanks Mark, but what I meant, is that a CELL in a form can have an attribute OR HTML
a cell in a query is JUST the attribute. How much nicer would it be if we had the option, just like in a form, to have the cell be HTML.

Bruce

Also, what is the trick to have a class in my CSS to be called for a grid cell? It works fine if the STYLE is inline with the query, but if I call try to call the class thats in the CSS, its just ignored.

Bruce

pureist

there is no trick. you just need to have the class in a correctly named css file.
I don't recall whether you need to exit the configuration tool and restart it after adding a class to a css file.

BLOMASKY

You are right re: the New Classes in CSS. If I change existing ones, then the changes show up, but if I add new classes, I have to restart the configurator.

Is there an easy way to attach a class to a grid column in a regular query?

Bruce

customaware

BLOMASKY wrote
Thanks Mark, but what I meant, is that a CELL in a form can have an attribute OR HTML
a cell in a query is JUST the attribute. How much nicer would it be if we had the option, just like in a form, to have the cell be HTML.

Bruce

Also, what is the trick to have a class in my CSS to be called for a grid cell? It works fine if the STYLE is inline with the query, but if I call try to call the class thats in the CSS, its just ignored.

Bruce

I don't know what you mean Bruce.

In that screenshot, the Flight Solutions IS A single Reference Attribute in the Booking BO.

BLOMASKY

I do see what you did in your form with the custom Reference query

But I was sort of changing the topic

In a plain old boring query, all I can have in a cell is an attribute. (All of the Attributes are in a list and any ones I "check" will show up in the query. I would REALLY like to have an option to have a cell be a HTML Cell so I could do what I do in a Form HTML Cell and have all of the power of HTML in the Cell. Be able to do <<IF BO.ATT == ?? then SHOW SECTION_START>> etc. etc.

Does this make sense?

Bruce

customaware

You can stuff html into the cell of a standard Query Bruce.... if that is what you mean.

For example.... I wanted some Values in a Query row to by links (a bit like a Zoom in Magic) and wanted conditinal indented text in one column....
You can just fill the text attribute with html and it works.

Here is what it looks like....

Here is what is in the Original Budget Text Attribute. It is then a hyperlink and indented depending on the level it is at.

If ProjectSummary.SummaryLevel<>'AREA' Then 
ProjectSummary.Finance_OriginalBudgethtml=`<a href=`+SystemSettings.CharQuote+`#`+SystemSettings.CharQuote+` class=`+SystemSettings.CharQuote+ProjectSummary.SummaryLevel+SystemSettings.CharQuote+`onClick=`+SystemSettings.CharQuote+`AwareApp.startProcess2('VIEWOriginalBudget','ProjectSummary',`+ProjectSummary.ID+`,'new_tab')`+SystemSettings.CharQuote+`>`+AS_STRING(ProjectSummary.Finance_OriginalBudget,'#,###;(#,###)')+`</a>` 
ELSE
ProjectSummary.Finance_OriginalBudgethtml=`<a href=`+SystemSettings.CharQuote+`#`+SystemSettings.CharQuote+` class=`+SystemSettings.CharQuote+ProjectSummary.SummaryLevel+` aw-decorated-grid-cell`+SystemSettings.CharQuote+`onClick=`+SystemSettings.CharQuote+`AwareApp.startProcess2('VIEWOriginalBudget','ProjectSummary',`+ProjectSummary.ID+`,'new_tab')`+SystemSettings.CharQuote+`>`+AS_STRING(ProjectSummary.Finance_OriginalBudget,'#,###;(#,###)')+`</a>`

pureist

you mean, a standard query column be HTML?

If so, you can have HTML in the instance attribute value.

And for conditional output you can (not use SECTION START) use 'Kendo UI Hash Templates' (which could be in the HTML which is in the Attribute Value), refer Post #42455:

https://forum.awareim.com/viewtopic.php?p=42455#p42455

Edit: When I started typing this Post your post was the last post, Bruce. Though after posting I noticed Mark's post before mine. His post is what I mean by "have HTML in the instance attribute value".
If you additionally read the above linked post in relation to Kendo UI Hash Templates, you will be ready to conquer the world! :mrgreen:

BLOMASKY

Thanks Mark!
Thanks Purest!

Silly me, I keep forgot about HTML Columns in the BO. That DOES work.

BLOMASKY

OK, on 2nd look,

Am I missing something? I have to have this HTML fragment stored in EACH row of my table? Not that space is that much of an issue, but with a table with 300,000 rows, this does make the table a LOT larger to just control the output display. Seems like a waste of space. Or, is there something (beside my brain!) that I am missing?

Bruce

pureist

yes, having HTML as an attribute value in each instance is not efficient in terms of storage, but it is convenient and easy.
if this isn't acceptable, and applying CSS to the query won't get you what you want, the only other option is to use a Custom Query with Kendo IU Hash Templates for any conditional display/formatting.