Tech Tip: 5 Ways to Customize the Look of Your DataPages

Now that your DataPages are fully functional how about taking a few moments to customize their look and feel?  Let’s take a look at the five most popular customizations Caspio users are making everyday to improve the look of their DataPages.

Style customizations you can make today:

1. Choose a new Style

2. Insert a header and footer

3. Add your company logo

4. Personalize your DataPage messages

5. Cascade your website CSS

1. Choose a new Style

There’s no faster way to dramatically change the look of your DataPages.  Caspio recently added new professionally-designed styles into every account to give you new cutting edge alternatives.  Best of all, predefined styles don’t change the functionality of your DataPages, so your apps retain the layout your users have already learned.

Steps to choose a new Style:

Select your DataPage and open the DataPage wizard

In the DataPage section of the Caspio Bridge Explorer window select a DataPage to try out some of the new styles.  Preferably this DataPage should be published to your website so you can see what the style looks like when presented with your other website formatting.

Choose a new style from the Apply Style dropdown

There are three dropdowns on the first page of the Edit wizard.  The Apply Style dropdown is automatically populated with all of the styles in your account.  Select a style from this menu and press Finish to apply it to your DataPage.

Preview your new style in Caspio and on your website

After you click Finish you can view your new style by double clicking on your DataPage or by selecting your DataPage and pressing the Open button.  Better yet, go to the webpage where the DataPage is deployed and see the new style against your other website formatting.  You can repeat the previous steps until you find a style that improves the overall look of your website.

Go to the styles section and apply this style to multiple DataPages

After you’ve selected a new style you can apply it to multiple DataPages simultaneously.   Press the Styles button in the Caspio Bridge Explorer window.  Find the style that you have chosen.  Select the style and click Edit.  Click Next past the first screen and you will see a list of all of your DataPages.  You can apply this style to each DataPage individually, or click the Select All checkbox in the column header.  Click Next again and Finish.  You’ve just updated the look of your Caspio Bridge apps in practically no time at all.

Adjust the style as needed

The last page of the Style wizard allows you to customize individual element formatting settings.  If you’d like to further customize your DataPages, take a look at the options under this section.  If you need special formatting for a single DataPage you can copy this style, edit it, and apply the adjusted version as needed.

2. Insert a header and footer

Headers and footers are a great way to add consistency across your DataPages. You can customize these regions to add a title, give your users quick contact methods, or add instructions and other information. These extra details provide a unified experience that is appreciated by end-users.  It is particularly useful to give a subtitle to the various screens of DataPage. For example you can add a DataPage title header in H1 tags and, in H2 tags, include specific page location titles for the search, results and details pages.

The footer can contain links back to the search page from the results or details page, a direct link to your “contact-us” page, legal notes, copyright information, etc.

Steps to creating a standard header and footer:

Select a DataPage and open the Edit wizard

In the Caspio Bridge Exploring window, go to the DataPage view and select the DataPage you’d like to alter.  Click the Edit button to open the DataPage wizard.

Press the Insert button and add Header & Footer

Proceed to a Configure Fields screen.  Web Forms have one Configure Fields screen whereas Search and Report DataPages have three (search, results & details pages).  Once you have navigated to one of these pages locate the Insert button.  The Insert button is just below the bottom right corner of the DataPage Elements panel.  The button displays an icon of a cyan colored arrow pointing downwards into two brackets.  Select the Header & Footer option to add header and footer sections to your DataPage elements.

Create a standard header or footer & apply to each DataPage

Use HTML to create your header and footer.  Preview your work on your web page.  You can then copy and paste your new HTML into your other DataPages.  You’ve now created a standard header and/or footer.

3. Add your company logo

You can display any image that’s hosted on your sever inside of your Caspio Bridge apps.  This is especially useful if you’d like to add a company logo or other images when using the “Direct from Caspio” deployment method.

Steps to adding an image from your server:

Copy the image location

Chances are, you’re already using your company logo somewhere on your website.  You can copy the location of this image directly from your browser.  Go to the page where you see the image.  Right click.  In Firefox choose Copy Image Location.  In Internet Explorer choose Properties and copy the address(URL) information.

Select a DataPage and open the Edit wizard

In the DataPage section of the Caspio Bridge Explorer window select a DataPage on which you can test some of the new predefined styles.  Preferably this DataPage should be published to your website so you can see what the style looks like when presented with your other website formatting.

Insert a Header and Footer

Proceed to a Configure Fields screen of the DataPage wizard.  Web Forms have one Configure Fields screen whereas Search and Report DataPages have three (search, results and details pages).  The Insert button is located on the bottom right of the DataPage Elements panel.  The button shows an icon of a cyan colored arrow pointing downwards into two brackets.  Select the Header & Footer option to add a Header & Footer.

Create the HTML image tag

HTML image tags are written using the following syntax:

< img src="Image Location URL" alt="Company Logo" />

Replace Image Location URL with the image location you copied earlier.  You can also replace the alternative text (Company Logo) to better describe your image.

Preview, copy and apply to other DataPages

Once you’ve formatted your logo correctly you can repeat this process for any DataPage you would like.  Since the image is hosted on your server it doesn’t affect your monthly data transfer limits.

4. Personalize your DataPage messages

Did you know that all of the messages in your Caspio Bridge DataPages are customizable?  You can adapt the language and tone of your DataPages to better match your website or company.  For example, the default message when a user tries to enter duplicate information into a Unique field is, “Value already present.”  You can change this to be more specific for your public users, perhaps something like, “Sorry, an account already exists under this email.  Please use a different email address.” You can even translate all of the messages into another language.

Steps to personalizing your DataPage messages:

Go to the Localization view

In the Caspio Bridge Explorer window press the Localization button .  This section stores the settings relating to language and time zone.  You can easily change the language or wording used in your DataPage messages.

Copy your current localization to create a new localization

Make a copy of your current localization.  Select Copy from the Edit menu.  This way you back-up copy of the original settings in case you would like to use them later.

Edit the messages you’d like to change

Select your new localization and press the Edit button.  Press Next two times and you’ll be in the Settings screen of the Localization wizard.  From this screen you can change all of the default messages.  The first three subcategories under the Text section include all of the messages that are displayed in Caspio DataPages.  The original default (English) message always appears above your custom text for easy reference.  Change as many messages as you’d like.

Apply to multiple DataPages and set as default

You can apply a localization to every DataPage in your account in the same way you can apply a style.  Select your new localization and press Edit.  In the first window there is a checkbox to make this new localization the default for all new DataPages.  Press Next to move to the second screen.  This is a list of all the DataPages currently in your account.  You can check individual DataPages or use the checkbox in the column header to select all of them.

5. Cascade your website CSS

One trend in website design is Cascading Style Sheets (CSS).  If you are a web designer using this technique, your Caspio DataPages are already configured to perfectly match your website.  To catch your CSS code you can create and apply an empty Style.  This is an advanced method which requires an understanding of CSS.

Steps to create a blank style:

Go to the Styles section and make a copy of your current Style

In the Caspio Bridge Explorer window, press the Styles button.  Make a copy of your current style so that you can revert to the original style in the future.  You can press “Ctrl + C” or select the Copy option from the Edit menu.

Enable Advanced Options

Select your new style and press the Edit button.  In the first screen of the Style wizard you will see a checkbox to Show Advanced Options (CSS Source).  Click on this checkbox and press Next two times to proceed to the Settings screen of the Style wizard.  This is the final screen of the wizard.

Delete all of the CSS code

Once Advanced Options have been enabled the top of the Settings screen will display an additional tab called Source.  This tab gives you access to all of the CSS code used to create this particular style.  To create an empty style we will remove all of this CSS code.  Select All from the top of the Data Page Elements panel.  Highlight all of the code in the right panel by clicking and dragging or pressing “Ctrl + A”.  Now press Delete.  Don’t worry; if you’ve completed the first step, you have a back-up copy of this style saved already.

Apply this new style and preview the results on your website

Go back to the DataPage section and choose a DataPage to apply this new blank style.  The DataPage will appear black and white if you preview it inside of Caspio Bridge (HTML defaults).  Go to the webpage where this DataPage is deployed.  If you have a functioning style sheet your DataPage formatting will now match the rest of your page.

Customize individual fields as needed

Because DataPages are often the only interactive feature on a webpage, you may want to alter their appearance slightly to make them more noticeable.  The last page of the Style wizard allows you to customize the format of the various, individual parts of your DataPages.  Any changes you make will be added back as CSS code into the section you previously deleted.  This way you can tweak the sizes, fonts, and colors in your forms to attain the desired appearance.

Go to the styles section and apply this style to multiple DataPages

Now you can apply this empty style to as many DataPages as you would like, simultaneously.   Select the empty style and click Edit.  Click Next past the first screen and you will see a list of all of your DataPages.  You can use the checkbox column on the left to apply this style to each DataPage individually, or click the checkbox in the column header to select all of your DataPages.  Click Next and Finish.  Be sure to go through all of your web pages to make sure the formatting changes have had the desired effect.