Custom Query now working FINE with "operations with Items"

BLOMASKY

It seems that an embedded style statement "upsets" the Kendo logic when selecting a recrord. Once I removed all of these nasty style statements and put them in the CSS file, then all is good.

Starting to like Custom Queries a LOT more

Using Kendo's IF / THEN logic I can now have conditional columns (YEA!)

Operations with Items no longer take up valuable grid space, but instead are called by the right click (context menu)

Using Display FLEX i have the option of having long columns wrap to the next line, so each row in the grid might be a different height (ok, this does mean I have to like scroll bars)

Life is good!
Bruce

aware_support

Yes, never use <style> elements anywhere in Aware IM - use CSS classes instead.

BLOMASKY

I have no problems using them in HTML cells in forms. You are telling me I should not do that?

Bruce

aware_support

Yes. Don't use them - they are supposed to be in the <head> section of an HTML page and if they are not, they may cause some confusion. As far as I am concerned, <style> element is a hack.

It is much cleaner to use CSS classes defined in your custom CSS file.

pureist

Does that now include the correct Instance/ID being written into Context when a Default Item Operation is selected?

Now you have a handle on the prerequisites for using Custom Queries effectively, being namely:

basic HTML and CSS
Flexbox
Kendo UI Hash Templates
starting processes from Tag elements

..I suggest trying experiementing with using non grid layouts.

I reckon more than 50% of the time a query is more visually appealing and efficient to work with for the user, if Instances are instead displayed as rectangular blocks which flow left-to-right top-to-bottom, rather than a grid of rows. ie. use display: inline-flex; with width: ??; on the overall parent Tag.

Below is CSS for an Instance block which contains all the Properties which I've found usually need to be considered for the overall containing parent Tag when displaying Instances as blocks, in any application development platform:

.class_name {
..display: inline-flex; width: 216px; height: ; font: ;
..color: #337ab7; padding: 2px; background-color: #ffffdf;
..border: 1px solid #cccccc; border-radius: 2px; cursor: default;
..margin: 3px 1.5px; align-items: center; }

height, is usually determined by the number of rows in the block
font, is often just inhereted from the application's settings

BLOMASKY wrote
It seems that an embedded style statement "upsets" the Kendo logic when selecting a recrord. Once I removed all of these nasty style statements and put them in the CSS file, then all is good.
Starting to like Custom Queries a LOT more
Using Kendo's IF / THEN logic I can now have conditional columns (YEA!)
Operations with Items no longer take up valuable grid space, but instead are called by the right click (context menu)
Using Display FLEX i have the option of having long columns wrap to the next line, so each row in the grid might be a different height (ok, this does mean I have to like scroll bars)
Life is good!
Bruce

RLJB

Pureist... can you post a screenshot of a custom query here that looks good, so we can see an example? Tks

customaware

Here is a nice little Flex Box sandpit that I found to help a css vacant space to "get it"

http://the-echoplex.net/flexyboxes/?fixed-height=on&display=flex&flex-direction=row&flex-wrap=wrap&justify-content=flex-start&align-items=flex-start&align-content=flex-start&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=0&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=0&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=0&flex-basis%5B%5D=auto&align-self%5B%5D=auto

pureist

Any style of query layout can look good, even a standard grid of rows.
What style do you mean? Do you mean the, Instance-as-a-block with blocks flowing left-to-right top-to-bottom, style suggested to Bruce to experiment with in my previous post?

RLJB wrote
Pureist... can you post a screenshot of a custom query here that looks good, so we can see an example? Tks

RLJB

Yes exactly... I'm curious because we have attempted this style, and never cracked it, meaning it has never looked good in my opinion. Getting the width's working on desktop/tablet (ie different screen widths) and the "tiles" sitting with correct margins etc. I would just like to see someone that has got it looking 100% - tks.

pureist

our aplications are designed for horizontal screen presentaions (ie. desktop, laptop, tablet), not vertical.
in terms of horizontally presented, typically only 3 or 4 tiles across the width is all that ever works well re. product descriptions fitting, etc.
if tiles were to be used for a mobile (vertical presentation), i can't imagine that more than 1 tile across the screen width could look good.
LMK if you still want an example.

BLOMASKY

I do understand that I should not have <style> ... </style> in my custom grids or html cells on a form

But... what is the difference between
<span class="someclass"><<bo.attr>></span>
and
<span style="color:red;"><<bo.attr></span>

Frankly the reason I use the Span style a lot is that I can keep tweaking the look until I get it just right. If I add a new class I have to restart Aware to re-load the css.

and using Kendu UI HASH templates I do have a lot of <spans> Example below:

if( data["daysOld"] > 14 ) {

}

if ( data["daysOld"] > 6 && data["daysOld"] <= 14 ) {

}

if ( data["daysOld"] <= 6 ) {

}

<div class="freshQuotesName">{name}</div>
<div class="freshQuotesAge">{city} {state}</div>
<div class="freshQuotesItem">{item}</div>

if( data["qtyPriceString"] == null ) {

<div class="freshQuotesQtyPrice">EMPTY</div>

}

if( data["qtyPriceString"] != null ) {

<div class="freshQuotesQtyPrice">{qtyPriceString}</div>

}

</div>

I am not sure why the Style is better or worse than the class.

RJB, I am attaching a screen shot of my custom query, which to me looks fine. Using pureist's guidance, I have all my columns in the CSS set to a fixed widt and one of them to flex 1 so it will grow (shrink) as the screen size changes.

here is a snippet of my CSS, notice the freshQuotesItems tag has the flex: 1 to resize that column

.freshQuotesAge {
flex: 0 0 90px;
padding-right: 6px;

}

.freshQuotesName {
flex: 0 0 160px;
padding-right: 3px;
}

.freshQuotesItem {
flex: 1 0;
padding-right: 6px;
}

.freshQuotesQtyPrice {
flex 0 0 100px;
}

Bruce

Screen Shot 2017-04-24 at 11.23.58 AM.png

pureist

surely V. is not saying do not use 'style' when it is a parameter in a Tag as per your examples.
'style' as a parameter of a Tag surely can't upset anything.

surely he only means not using 'style' when it itself is a Tag with CSS in between, as per first line of your Post:

surely. :mrgreen:

BTW, your Kendo UI Hash Tag examples are not the most efficient. They should be structured as if, elseif, else, (not really delved into on Kendo website), per following Post:
http://www.awareim.com/forum/viewtopic.php?p=42455#p42455

BLOMASKY

Funny you say that, I could NOT get the elseif to work. thats why I did a bunch of IFs

Bruce

ACDC

I have been following this subject with great interest, I have never been able to achieve the right kind of layouts in my custom query templates. In the explanation of the template form it says " can be Horizontal or Vertical " ( I don't mean to divert the subject) but could one of you experts please advise if it is possible using the custom query option to do the following:

Customise a query that presents the horizontally listed items vertically? Something like a monthly budget spreadsheet where the column headers in the grid are an attribute in the object. So each record becomes a column from left to right

In the example below Jan, is a record that contains attributes Sales, COS, and GP showing each record vertically (in the Feb March April records I would suppress the labels Sales, C.OS., G.P)

                            Jan              Feb            March           April

Sales
C.O.S
G.P.

Thanks

pureist

you mean, effectively you just want to Transpose (like with spreadsheet data, switching the row headings to instead be the column headings, and vice versa) the data in the table? ..in Lotus 1-2-3 it was accomplised by selecting the range, and then typing /rt (/ = menu, r = range, t = transpose) [in case you ever did it]??

so the table which stores the totaled profit data looks something like?:

Period Sales COS GP OpCosts NP

Jan-17 1000 600 400 150 250
Feb-17 etc.
Mar-17

or,

Period Component TotalAmount

Jan-17 | Sales | 1000
Jan-17 | Cost of Sales | 600
Jan-17 | Gross Profit | 400
Jan-17 | Operating Costs | 150
Jan-17 | Net Profit | 250
Feb-17 | Sales | 750
Feb-17 etc.
etc.

If that's the case, then it is possible to achieve with a CC:

..................Jan-17.....Feb-17.......Mar-17.......etc.
Sales 1000

COS 600

GP 400

OpCosts 150

NP 250

..but it would require a Process to transpose/compile the raw data into a new temporary table which is then output in a Custom Query.
In which case, a standard query could also be used for output.
But with a CC you would at least get the exact layout and prresentation you want.

ACDC

..but it would require a Process to transpose/compile the raw data into a new temporary table

I was hoping to get rid of the additional process using pure css. This is very similar to the procedure I would use when designing charts i.e have an object that represents the chart.

thanks anyway

tford

I do something similar by having a summary BO with appropriate rules, then present it in a standard query. The user simply selects a date which is stored in LRIU, then a process simply does:

FIND ALL Summary
UPDATE Summary

The Summary rules fire to update the totals in Summary instances, then are displayed on a query.

BLOMASKY

if you research "PIVOT TABLES" in SQL you will find out how you can do just that.

Bruce

ACDC

if you research "PIVOT TABLES" in SQL you will find out how you can do just that.

That does seem to be the answer, and also a hell of a lot simpler way of doing such a thing ....just wondering how I would implement that in AwareIM

pureist

I reckon it will almost be simpler, and perhaps more flexible, to put togther a process with subprocess to pivot the data in Aware, assuming there is a maximum number of periods (but can be variable up to maximum) to be displayed.