A prime usage example of QueryDisplay would be with our CalcStack. As you know, CalcStack can pass a calculated answer to another page, with the calculated answer appended as a query string. So it would be feasible to collect an answer from a user in CalcStack and pass it onto a page hosting QueryDisplay. Based on what answer a user has provided, you could then display a particular product or service; which you feel might be best suited for the customer. An optional 'display all' button can be setup, so that it would still be feasible for the customer to view all possible products or services.

Another example of QueryDisplay would be using it in conjunction with Sentry. Here you can have Sentry append the login status of the current user, as a query string. These query strings can be used by QueryDisplay to display attractive messages to the user. Messages such as "incorrect password" or "you are now logged out".

Examples

Here are some examples of QueryDisplay you can try.
 
Well done! Your browser address bar contained the query string key-value pair cat=true, so here is a random picture of a cat to make your day better:


cat
Good job! Your browser address bar contained the key-value pair answer=7, so here is the number 7:
7
Nice work! Your browser address bar contained the key-value pair weight=2. The number 2 is equal to or less than 10, so we can assume this would be a lighter item to ship, so we would charge less for it. Light items are classed as any item with a weight equal to or less than 10.
Nice work! Your browser address bar contained the key-value pair weight=16. The number 16 falls between 11 and 20, so we can assume this would be a medium item to ship, so we would charge our medium shipping rate for it. Medium items are classed as any item with a weight between 11 and 20.
Nice work! Your browser address bar contained the key-value pair weight=36. The number 36 is greater than 21, so we can assume this would be a heavy item to ship, so we would charge our heavy shipping rate for it. Heavy items are classed as any item with a weight greater than 21.
Your browser address bar contained the key-value pair lang=latin. So here is some content written in latin:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue egestas nisi. Nunc ullamcorper nec urna in congue. Vestibulum vitae risus accumsan, fringilla lacus vel, auctor orci. Morbi vel molestie diam, eget pellentesque libero. Nam risus leo, tristique quis felis at, blandit consequat odio. Nullam in leo felis. Proin eu convallis risus, nec dignissim justo. Vivamus ac vestibulum mi. Donec finibus neque imperdiet, bibendum mauris at, porta nunc. In hac habitasse platea dictumst. Aenean id tempor purus.

Donec sollicitudin urna at enim elementum elementum. Nam et viverra libero, ut vehicula sapien. Mauris vitae congue justo. Ut id odio vel tellus volutpat consectetur ac eu justo. Pellentesque leo lacus, laoreet in lectus non, scelerisque scelerisque tortor. Cras venenatis ex nunc, a interdum mauris rhoncus a. Phasellus ac volutpat leo. Maecenas tincidunt mauris dolor, et dictum odio venenatis eget. Duis arcu lacus, laoreet ac risus sit amet, dignissim pharetra ex. Phasellus est velit, pharetra at sollicitudin nec, pretium nec nunc. Sed facilisis in massa eu volutpat. Etiam ante risus, sodales vitae enim et, efficitur placerat massa. Suspendisse in mauris vitae sapien venenatis porta sit amet nec libero. Donec rutrum ligula quam, in semper sem venenatis eget. Phasellus pulvinar quis orci nec suscipit. Phasellus augue nisi, feugiat vitae auctor quis, venenatis non diam.

Nullam et enim in orci semper dictum. Maecenas ac augue faucibus diam dictum tincidunt id vel nibh. Proin mollis dapibus massa non placerat. Maecenas aliquet mauris vel nibh elementum mollis. Proin congue ipsum a gravida volutpat. Donec semper lacus venenatis, condimentum dui eu, suscipit velit. Nam aliquet nunc quis nunc pharetra bibendum. Cras a tortor molestie, ornare justo elementum, condimentum purus. Integer malesuada, nunc nec tempus volutpat, arcu diam dapibus est, at cursus nisi tellus ac metus. Phasellus vitae sollicitudin sapien. Nam luctus eros est, sit amet consequat metus malesuada at. Mauris elit turpis, dictum nec sapien eget, ultricies fermentum mi. Sed sodales diam sit amet elit ultrices dapibus. Morbi sodales sit amet massa vel lacinia. Sed laoreet tortor et odio varius auctor. Integer blandit finibus eros, nec laoreet orci consequat in.
No query string was detected in your browser address bar. Please try one of the example links below instead!
 
Example links:

* This final example is proof you can have a very long query string containing multiple key-value pairs. QueryDisplay is still able to test this. In this example, it finds both of our first two examples ( 'Cat' and 'Number 7'), so both of these get shown.

Setup

Follow these quick instructions to get QueryDisplay working on a page in your website
  1. Download the stack and install it into Stacks / RapidWeaver, in the normal way.
  2. Open the Stacks library and drag and drop a copy of QueryDisplay 2 onto your webpage.
  3. Drag and drop the content to be shown or hidden by QueryDisplay into the drop zone makes Drag stacks here.
  4. Within the stack settings for QueryDisplay, choose the Test Condition from the list. These change how you test query strings, to look for (or exclude) certain conditions.
  5. Provide a key and / or value to test with. Alternative for testing a range, provide a minimum and maximum integer (number).
  6. Preview your webpage in a normal web browser window (e.g. Safari, Chrome or Firefox) to test.

Important: QueryDisplay cannot be fully tested inside RapidWeaver preview, because RapidWeaver does not have a browser address bar. Therefore RapidWeaver cannot pass query strings from one page onto another. Please preview your page in a normal web browser window (like Chrome, Firefox, Opera or Safari) or publish it online to test.

Updating from QueryDisplay v1

QueryDisplay v2 was released on Friday 25th September 2020. The codebase has been radically overhauled. The entire user interface has been revised. This is treated as a major update, and therefore there is no automatic update or upgrade path. QueryDisplay v1 and v2 can be safely installed together on the same computer. Download and install QueryDisplay v2 using the links on this website. You can manually add QueryDisplay v2 stacks to your webpages. Drag and drop content from the QueryDisplay v1 stacks into the QueryDisplay v2 stacks. Update or amend your test conditions as necessary. QueryDisplay v2 now has a great many more test conditions available to use. If you still need QueryDisplay v1 (like to open older RapidWeaver projects) you can still download it from the Archive page.

Need more examples?

There is a useful table you can switch on in the QueryDisplay settings. This table only gets shown in edit mode. The table presents to you some ideas of key-value pairs to test against, and the result you could expect. QueryStrings are widely used all over the internet, so there are certainly many more examples to be found.

How can I create my own links or buttons with query strings?

Query strings are universally supported in all major web browsers, and across all platforms. You start with a standard webpage link like this. It does not matter if the address ends with a file name, extension or forward slash:
https://example.com/index.html

Now you apply a question mark, to determine the start of the query string:
https://example.com/index.html?

Then add a key and equals sign:
https://example.com/index.html?colour=

Then the value after the equals sign (a value can either be a word or a number):
https://example.com/index.html?colour=pink

If you want to add additional key-value pairs to your query string, just separate them with an HTML & ampersand entity:
https://example.com/index.html?colour=pink&size=medium&weight=16&units=kg

Key-value pairs in QueryStrings are case sensitive. Do not use spaces or special characters in either keys or values. Query strings are safe to use in all web browsers, together with PDF files, documents and emails. You should avoid sending sensitive information (like contact details, passwords, email addresses or credit card information) as query strings, as these this content could be easily intercepted by a third party or incorrectly routed to another website. Query strings are best used for enhancing the user experience and for website automation.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.