Workflow and ServiceDesk Community

We are building a web page where we would want to display data of different laptop/desktop models.  All this is in a database. We wanted the page to look like lets say the applestore, where you would see different models and the specs beneath it.  Would i have to run a query for each model to display the specs? Is there an easier way with workflow?

I should get referral bonuses from the ListSelect component for how much I push it on people.  The ListSelect can do almost anything you want along with some corresponding and creative CSS (and javascript, depending on what you want to do).  This can include image data as well.

ListSelect doesn't have to be a single row of flat text.

and another:

Not sure if this answers your question or not, but the ListSelect can definitely be used for what I believe you're after.  A single query can be run to get an array of results that match whatever criteria you're applying, and then a list select can be used to display the results in a nice table-formatted way (although it doesn't have to look like a table).

here's another screenshot of the patch management process that shows more data differences and how we can format based on the content with javascript/css.

note the themes applied by severity level.  click to enlarge.

thanks, its doing what i think i want.  I Just need to figure out how to apply CSS to this bad boy

Generally, just build the table how you want it in the text builder.

By default, when you insert a table into the text creator, it is given a border=1 inline parameter.  switch to the "Source" tab to remove this attribute.  Publish or debug, and view the barebones table in a modern browser with "inspect element" capabilities (I use Chrome mostly).

Clicking "Inspect element" will bring up the dev tools menu (at the bottom of the browser by default).  From here, have a look at the path to the element you selected. (click the image below to enlarge)

Notice the td highlighted in the strip at the bottom; that corresponds to the highlighted row above it.  Follow the tags backwards until you find the Control Id you've set for the ListSelect component.  In my case, it's "BulletinList".  The ListSelect components (and most other form components) are nested in a "wrapper" element called Spanwrapper_[ControlId], which we can generally ignore when dealing within the element's own context.  So the element we want to start with in our CSS is the div with the id "BulletinList", which is found in the strip as "div#BulletinList.gaBulletinList" where the ".gaBulletinList" is the theme style applied to the form component (translates to the CSS class).

So to apply CSS styling to this element for every iteration in the array, we'll just lead it down the path like so:

.gaBulletinList > table > tbody > tr > td > table > tbody > tr:first-of-type > td:first-of-type {
  color: #8f6764;
  font-size: 16px;
  font-weight: 500;
  padding-left: 5px;
}

Where the chevron symbol is saying "find elements with this tag inside the tag just to the left of it".  In the above example,  "In elements with the class .gaBulletinList, find all table tags, then find all tbody tags inside those table tags, then find all tr tags inside the tbody tags inside the table tags, etc etc."  You can see that the CSS "immediate children" pathing corresponds with the bottom path strip in the screenshot above.

The selectors like "first-of-type" and "nth-of-type" are used to target relative elements.  In this case, we're targeting the first td in the first row (tr) of every item in the collection.

Another example:

.gaBulletinList > table > tbody > tr > td > table > tbody > tr:nth-of-type(2) > td:first-of-type {
  color: #999999;
  padding-left: 10px;
  width: 25%;
}

Here we are targeting the first td of the second row (tr) in each item in the collection.

Note that this structure can (and most likely will) fundamentally change if you make any adjustments to the table to which the CSS is applied.  We are unable to efficiently use CSS like we would in a standard webpage, because we're only able to directly apply a single class to an element as a theme style (although you can add additional classes with javascript as needed).

Here's some more reading on CSS and Workflow.
 

http://atmaworkflow.com/tag/css/

let me know if you need more specific examples or further description.

-andrew

Is there a way to have the columns build from left to right, instead top down.

That's an interesting concept - I'll see if there's any way to hack it.  

so instead of a listselect component "growing" downwards (and having a vertical scrollbar), you'd have it grow to the right and have a horizontal scrollbar?

Yep exactly

well it's certainly a hack, and i can't say I'm terribly proud of it, but maybe this will get you in the right direction.

basically what we are doing is telling the table that we want the rows to be inline in a single row.  You'll need to experiment and get your elements the appropriate size, but here's the basics of it (body onload):

var tList = document.getElementById('TestList');
var tHTML = tList.innerHTML;

tHTML = tHTML.replace(/<\/tr><tr>/gi, '');

tList.innerHTML = tHTML;

where "TestList" is the name of the ListSelect component I'm adjusting.  this is removing all of the row tags except the first and last, and transforming the table into a single-row table.

If you use tables inside tables, like this:

then you can avoid stripping the nested rows by adding a marker to the rows you want to keep like this:

this prevents those row tags from matching the regex lookup in the javascript event.  if you're applying any inline styling to the tr tags, this solution may need adjustment to work with your exact script, as the regex won't match your script.

this isn't an exact science, and since there's no button that says "display horizontally", we'll just have to find something that fits your scenario.  let me know if this helps.

-andrew

GENIUS!!! Worked perfectly.

hah well glad to help!  thanks for the interesting concept to tackle.

well that sucks, i published to server and the java script didnt run lol. works fine in debug though

**edit  forgot i had to change the web.config to emulate Edge. works now :)

Not sure if you're designing for multi-browser compatibility, but i use crossbrowsertesting.com and it works pretty well.  It basically gives you a nearly instant VM with the OS and browser brand/version you choose, and lets you test local and internet sites for compatibility.  that, combined with a browser evaluation model in your workflow, lets you create CSS/javascript/html for whatever browsers you support, and then handle it however you need.

http://atmaworkflow.com/2015/01/17/custom-component-determining-the-client-browser/

and 

http://crossbrowsertesting.com