A Help Topic to step through the value of Qrimp's Charts.


In every grid view in your Qrimp Application at the bottom of the data there are a few default buttons.



Qrimp does offer a few canned Reports but to get your hands dirty with your data Qrimp has Custom and Cross Tab Reports.

When you are in the Grid View, one of the default buttons in the Content Header is Reports. If you click on that you will get a screen similar to this



Once you are at this screen you can now see the buttons in the Content Header that say Custom and Cross Tab Reports.

Here is an example of a Cross Tab Report. The data is from 2006 and 2007 Most Expensive Zip Codes in the US ranked by Average Median Sale Price. The Report compares the Counties year over year.



To CHART this Cross Tab report we can go to the bottom of the data and click 'Chart' it will take you to a screen like this.



There are several ways to change the look and feel of your chart.

Lets begin with the Chart Title. The Chart title will appear above the Chart.



The View Next button allow you to scroll through various charts to represent the data in a different way. Here is the same chart as above after Clicking "View Next". You can also use the Drop Down Menu located to the left of the "View Next" button.


The Show Top field allows for adjust of records you want to see. In the two images below is of the same Chart but different amount of records displayed just by changing the "Show Top" field.





The Order By Column allows you to switch the order by which the graph is displayed. By default it is ascending but the radio button next to the field allows you to order by descending as well. This can be seen in action in the two images below.





The Dimensions of the Chart can be changed to make the graph more readable. This might be used if the data set is large and the default width and height need to be expanded. The first image is the default size and the second image changes the width and height to make the graph a little more readable.





Sometimes on the x-axis the labels get jumbled together, like the first image below. To make the graph a little more readable there is a Rotate Names radio button that will rotate the names vertically, like in image two.





The "Animate" radio button adds a little functionality to your Chart. If you check the button and click "Show Chart" it will build the Chart right before your eyes. Watch the video below to see it in action.



Sometimes the graphs don't tell the whole picture. By adding values to a chart the User will know the exact amount. So, by clicking the radio button next to "Show Values" the Values will appear on top of the bars, like in image two.





To make graphs more readable you can add colors to distinguish between each type of bar. By clicking on the palette a color picker box will appear (image 2) and because I have three different labels I will click three different colors. There is no need to close the box each time.







The Share button can be used to add Charts to your Portal page. Here is a help topic that will walk you through the process. Creating A Portal with a Chart

To add additional security around data Qrimp allows you to add white and black lists.

A Whitelist will only allow the characters specified in the list.

A Blacklist will strip out the characters specified in the list.

To add either functionality to a system the first step is Develop > System Tables.



Then click on the t_groups WITHOUT the magnifying glass.



To add the additional field to the table click on the Table Management Icon in the Content Header



Scroll down to "Add a Column" and input either inputwhitelist or inputblacklist all one word



Once the column is added there are two steps. First you must log out and log in to make the change take effect. Then go back to the table and click Design > Field Layout to move the field to a usable spot.

It should look like this when complete. Now click the Edit Icon in the Content Header enter in the characters that can ONLY be entered. For this example lets say I don't want numbers. I will only include the 26 letters of the alphabet and click save.

If you use JavaScript to create a new item, you may want to retrieve the ID of the element just created. To do this, use the _returnresult=true option in the querystring.

For example, submitting a querystring like the following will create a new item in the Person table with a name of Linda.

var id = getUrlString('db.aspx?t=person&name=linda&o=5&_returnresult=true');

You can now use the value in ID to add information to other tables that is related to the person Linda. Like this:

var taskid = getUrlString('db.aspx?t=tasks&name=Register+for+intranet&person=' + id + '&o=5&_returnresult=true');

Charts and Reports make good additions to portals as they provide a quick overview of your data.

To add a chart to a portal page, first find the chart of your liking. For the example I'm going to use the most expensive zip codes by county year over year. Before you click the Share button don't forget to copy the script inside the text box. (Shown in figure 2)



After you click the Share button it will take you to a Create portal page.



After you click the create button you need to add it to your portal page which will be located in the Header/Footer.



After you add the portal subscription it should look like this:

Sometimes it is convenient to allow users of your Qrimp application to filter the items in one select box by choosing an item in another select box. For example, when choosing to examine fuel economy by vehicle, because there are hundreds of different types of cars, you could let your users filter by Make, and then show only the particular models for that make in another box.

In this Help Topic, we will use another example that fits with our Campaign Contributions system, where when choosing a candidate to add a contribution for, you can filter the list by the candidates party. We'll end up with a dependent select box like the image below:


Here is a video that shows the dependent select boxes in action:


To get started, we will first go to the Add New screen for the Contributions. Notice the default select box has only a list of candidates:


From the add new screen for contributions, select Design > Field Templates:




Next, we will click the edit icon for the Candidate column. Since we have not modified the template for this field yet, Qrimp has created one for us automatically that looks like this:


To add a select box for Parties that will filter the candidates list, we will edit the field template to look like this:


Notice we have inserted this block of text before the Candidate select box:

[select:Parties:Candidateparty]

This tells Qrimp to create a select box that will filter the Candidate select box and show only those candidates where the party is equal to the party we select in the Parties select box.

If we want to hide the Candidates select box until a selection in the Parties select box has been made, we can use code like this:

[select:Parties:Candidateparty] then Candidate

The span indicated with the id Candidate_selectbox is the location where Qrimp will display the list of candidates in the party that we choose in the Parties box. This example behaves like the video below:



Your final output should be in this format:

COLUMN_NAMEfilter  name=_COLUMN_NAMEfilter onchange="javascript:changeCOLUMN_NAMEcontents(this.value ); ">- select foreign_key_table_to_filter_with - then COLUMN_NAME

The code above is telling Qrimp to display a SELECT box with data that is used to filter another select box that ultimately has the list of items of which one is the desired selection for the field in this table.

So for example, if you are creating a trouble ticket system for equipment and have 100 pieces of equipment, each with an EquipmentType and you want to make it easy for your users to select just one piece of that equipment, you'd use a command like the following:

COLUMN_NAMEfilter  name=_COLUMN_NAMEfilter onchange="javascript:changeCOLUMN_NAMEcontents(this.value ); ">- select equipmenttype - then Piece of Equipment

You can format numbers using square brackets like this:

<br />THEFORMAT</noeval><br /><br />If you'd like to format 123456 like 123,456 you would use the following code:<br /><br /><noeval>[formatnumber:<number>[DATA]</number><format>{0:#,###.##}</format>]<br /><br />

Some formats you can use include those listed at the Microsoft Developer Network: http://msdn.microsoft.com/en-us/library/dwhawy9k.aspx

If you have a hosted website you can use Qrimp as the database to show data on that website using either EMBED code or IFRAMES.

Using Embeds
Most savvy web users have seen the embed feature on news, music or video sharing sites. Embed codes contain HTML that links back to a database and pulls in and displays information in other websites. To learn more, visit the Share Data help topic.

Using IFRAMES

Before you create your IFRAME, write a query string (see Query String Parameters) that displays data the way you want it. Then write an IFRAME where the SRC of the IFRAME is the url to your Qrimp database query string. Then copy/paste the IFRAME into your website to display the results.

Re-sorting the Data in an IFRAME
When you want to re-sort the data or query it, you can use JavaScript to update the SRC tag of the IFRAME and the results will be redisplayed automatically. For example:

document.getElementById('results').src='http://mydatabase.qrimp.com/db.aspx?t=products&orderby=productcode';

or

document.getElementById('results').src='http://mydatabase.qrimp.com/db.aspx?t=products&orderby=color';

Searching IFRAMES
You can search your IFRAMES BY using a query string with search parameters. For example, to search for products where the product name contained the word "vinyl", you'd do something like this:
document.getElementById('results').src='http://mydatabase.qrimp.com/db.aspx?t=products&productnameop=CONTAINS&productnamequery=vinyl';

When you build a database, data can be displayed in different ways. For example, sometimes the data appears in a select box, a table or grid view, and if it is a record related to another one, sometimes it appears on the right hand side when viewing a main record.

Let's say we have a table called Transactions that has many Payments associated with it. When creating a Payment, a select box will appear prompting the user to select a Transaction to associate with the new payment. If, after creating the payment, the transaction selected in the drop down box is viewed, the right hand rail will show a list of Payments associated with the Transaction record.

In this case, Qrimp will try to be smart about how it shows those records in the right hand rail so you can understand exactly which payments those are. Because screen space in the browser is limited, Qrimp chooses just a single piece of information to display. It does this in a particular order:

1. If a field exists in the table called "Name" that data is shown.
   
2. If no Name field exists, Qrimp finds the first text field with 100 or fewer characters to represent the record.
   
3. If no no text fields with less than 100 characters is found, Qrimp shows the ID for the record.
   

Sometimes this strategy is suboptimal, meaning, you want to "help" Qrimp understand how to present the data to your application's users. To help Qrimp, each table in your database has Table Settings which you can use to describe how Qrimp should display the data in it.

There are two fields on the Table Settings page that you can use to tell Qrimp how to display the data, the first is the default field which appears near the top of Table Settings Edit screen. If you want Qrimp to display data from only one field in your table in the right hand rail or in select boxes, choose a column in the Default Field drop down.

The Second field is the Default Template, which can be seen near the bottom of the page. If you want to create a template for records in the table that contains information for several columns, use the Default Template.

Continuing from the example above, let's have a Payments table with just the ID, Amount, PaymentDate, and PaymentMethod. The PaymentMethod is a pickfrom the PaymentMethods table. In this table, there is no text field to represent the payments, so we want to create a Default Template using the Payment Amount and the Payment Method. Since the Payment Method is a pick from, we need to use Square Brackets to represent this.

To accomplish our goals, we will create a Default Template as follows:

$[Amount] - [PaymentMethods:[PaymentMethod]]

This use of Square Brackets tells Qrimp, that when displaying a Payment, format the data using a dollar sign, then the Amount of the payment, followed by the name of the payment method used, which is retrieved from the PaymentMethods table using the value in the PaymentMethod field of the particular Payment record.

If you'd like to take your Qrimp app to the next level of design, you'll probably want to add some new fonts. The Google Fonts API
http://code.google.com/apis/webfonts/ is the best way to make using more fonts easy!

For Google Fonts to work with IE, you must include a STYLE tag as the first line in the HEAD tag. To do this, we have a custom feature to modify the first line of your Qrimp app's HEAD tag.

This help file will walk you through the steps required to add the ability to modify your head tag.

First, you must add the HeadOptions column to the t_stylesheets table.

Choose Develop > Manage Tables
View System Tables
Find t_stylesheets (id: 16)
Click Edit for that table.
In the Add New Column section, enter headoptions for the column name and choose Single Line Text up to 255 characters as the data type
Click the Add Column button
Stay on this page to continue to the next part of this task.

Second, you need to update the headoptions field for the style sheet for which you want to include extra fonts.

To do that, at the top of the Edit t_stylesheets page, you'll see a link to t_stylesheets with a magnifying glass to the left of it.

Click that link. It will take you to /db.aspx?t=16 and show you a list of your stylesheets.

Click the edit icon () in the row of the stylesheet you want to enable fonts.

Paste the text box below into the headoptions field:


The code above includes ONLY the Smokum font, you'll need to update the list of fonts to include the fonts you want to add to your site. For example, to include Smokum and Bevan, you'll use the text in the following input:


For more information about creating the proper Google Fonts import link, please visit Google Font's getting started page:
http://code.google.com/apis/webfonts/docs/getting_started.html

The site header is an area of your Qrimp app that appears near the top of every page and every view. This is where you can find the logo, the login div, and the search bar. If you want to change just the logo, visit the help topic on Changing the Logo first.

Editing the Site Header

Go to Design > Skins. In the area under "Change Site Header and Footer" marked "Header" enter your HTML content and click save. Be cautious, as any changes you may have entered in the skin above will be lost when you save the site header/footer.

Replicating Look and Feel with Site Header

One of the fastest ways give a Qrimp app the same 'look and feel' as an existing site that you wish to migrate to Qrimp, is to copy the content from the page head or banner area near the top of the originating page.

To do this, copy the HTML and CSS from the originating page. If you have footer content, do the same, but copy and paste it into the Footer text box. You will surely have to make a few tweaks to width etc, and pull in any images, but this is a great 'head start'.

Warning

Since the site header can include any HTML, there is a chance that you can really disrupt the normal operation of your Qrimp app. For this reason, we strongly recommend you copy the Default Skin into another skin before you make changes. This way, you can make changes outside the normal site that your other users are using. Then, when the Header is working correctly, you can copy it into the Default Skin's Header for everyone else to enjoy too.

If you really break the site header, you can switch back to the Default Skin that works and then delete the new skin you were working on and start over or correct any issues.

If you are copy/pasting HTML from another website, be sure it doesn't include any FORM tags for search forms or other HTML. We recommend you start slowly with only minor changes.

The topics in this section cover how users navigate your Qrimp app. How do users get to your data? Which actions are allowed from which places? Which messages are shown on forms?

This section explains how to get data into and out of your Qrimp app. You will learn how to add data, delete it, edit it, import it, export it and more.

Get deeper insight into your data with queries, reports and charts.

Learn about how to display data in Qrimp and change the look and feel of your application with skins (CSS stylesheets). Change where form fields appear on a page.

Learn to use Qrimp for messaging and share data that is in your Qrimp app.

Everything you need to know to keep your account running.

What is HTML?

HTML stands for Hyper Text Markup Language, it is how web pages are made. Knowledge of HTML will help you modify the way your Qrimp application is displayed, but is not required to use a Qrimp app.

Working with HTML

You can see the HTML for any web page by using the Developer Tools in your web browser. You can also right-click and select View Source or View Page Source.

You can use HTML in a Qrimp app when editing records, in the Header/Footer for records, in Views, and in Field Templates. You will need to make sure that your user group has permission to edit HTML (See User Groups.

Here are some resources to help you learn HTML.
W3C Schools HTML Tutorial
Dave Raggett's Getting Started with HTML
EchoEcho.com's HTML Tutorial
Interactive Tutorial for Beginners

To convert a field to a drop-down (also known as pick-from or look-up table), first go to the table with the field you want to convert and go to Table Management.



Beside the column you wish to convert, click the "Convert to Pick From List" link.



You will get a warning pop-up asking you to confirm the change. Click okay. Once you have converted the field, you will notice a magnifying glass in your table management list and a link to the look-up table.



As always when adding a new column, use the form designer to position the new field in your Detail View/Edit View/Add New View.

You can also add widgets to your form to create borders around groups of text entry fields or to otherwise spruce it up. Watch the video below for more a demonstration of widgets.

The features in this section will be useful to those with a web development background. Be cautious when implementing these features.