There is a specific search form and view for results built into Struturo. This allows you to easily add a search block to a column and get formatted results when doing searches.
Create a block
The easiest way to get started is to create an HTML block. This block will submit 2 fields to the backend form: "Category" and "Query". If you don't want to search by Category, just leave the category input field value equal to null or don't include it in the form submit. "Query" will be the field the user is filling in.
In this example, the category field is "Press Release" always so it is hidden (type=hidden) from the HTML.
Style the block accordingly
We have this as a blue background with an arrow for the submit. If we had it to do again, would probably just do a standard form submit with the validation added later to the page using JavaScript. Don't typically recommend this approach in case someone has JavaScript disabled.
HTML Output is just a table
So you can style it the way you like in your theme document. Note the thead and tbody are in there in case you want to use JavaScript to make the search results sortable.
End result can be very pretty
In this case, we actually added hover and click features using JQuery but you could style this table any way you need.
Make sure to create a Section titled "Search Results"
The output view is going to show as the section called "Search Results" so make sure you have a section with the correct columns and tabs to make sure the results look like they are on a decent looking page.
Standard Domino Search
The end result of submitting the page is just a typical search view format so you can just search the view called "SearchPages" so whatever means you need to get to that URL is fine. Note in this example that the result has been URLencoded so you see %20 for space, etc.
The whole purpose of sections in Struturo is to simplify management of navigation elements. So if you want to change a navigator element for an entire section, all you do is modify one section definition document. Every page in that section would then have the change.
So recently, a customer wanted an individual image to display on individual pages in a section. But they still wanted the same layout for all the pages. So rather than create separate section definitions for each page, we added the capability to the page to override a particular section navigator.
When you click on the override section checkbox, the section defaults are already filled in for you. So it's easy to make a minor change specifically for that page, yet retain the power of the section definition control.
This new feature will be in version 1.60 coming out soon.
We all love graphics. So naturally, when your customer wants to display a bullet list, they are not satisfied with a black circle or square. They want a fancy triangle or colored circle.
Style sheet to the rescue
A style sheet can accomplish this very easily by adding a background graphic to the list item and setting the list-style to none.
Uh oh...
The downside to this approach is that the default setting for many browsers is to hide background graphics. So in this case the user loses the bullets when printing.
This is easily solved in Struturo by taking advantage of the print tab in the theme document. All you have to do is set the list style for the ul tag to something other than none and reset the left margin and padding.
Browsing various web templates, you might notice a technique often used for titles where the last word of the title is a different color than the rest of the title.
It's a minor change, but it does add some interest to those titles.
Because it's irrelevant to the core HTML, we do not like to modify the HTML directly to add something like this.
Instead, we use the concept of unobtrusive JavaScript which can update the page on loading (actually a little bit before loading) with extraneous HTML like this.
We prefer to use JQuery as our library of choice for JavaScript. It's a small sized JavaScript library and very nice in its approach to DOM navigation. You can reference elements in the same way you would in the stylesheet. But I don't want to get into all that, you can read about JQuery on your own.
So by adding the JQuery JavaScript file to the theme document and also a short JavaScript to do the work, you can have this technique enabled on your site.
If this is the only JavaScript you are going to use on your entire site, you may make the determination that this little feature is not worth loading two JavaScript files. But on the other hand, if you want a little pizazz, it's not a bad thing to do.
Struturo creates tabs as a list of links in an unordered list. Then you use is the CSS theme document to style those tabs. So there are a lot of options about how the tabs will look.
But what if you want to use graphical tabs as opposed to text tabs?
Well, a high performance way of doing it is to create one tall graphic as opposed to multiple smaller graphics. With one tall graphic you can display the tab itself and its hover state simply by changing the background position. This saves the HTML from multiple grabs to the server per image.
Also you can account for a user who does not have CSS enabled by simply showing the standard link text.
There is a technique for putting padding enough to shove the link text outside the visible area and replace it with the graphic. This is also a nice technique to maintain accessibility. You can search for text replacement on the web to find the technique so I won't go into it here.
Here is the original HTML:
Here is the CSS two support the graphics and the hover state.
ul#tabs li {
margin:0;
padding:0;
float:left;
height:21px;
}
ul#tabs li a {
margin:0;
padding:21px 0 0 0;
overflow:hidden;
display:block;
height: 0px !important; /* for most browsers */
height /**/:21px; /* for IE5.5's bad box model */
background-image:url(../Files/bg_tabstack_160x210.gif/$file/bg_tabstack_160x210.gif);
}
ul#tabs li#idtab-training a {
width:97px;
background-position:0 0;
}
That's why we made the footer formula able to accept @formulas. This way, when you create your footer on Struturo, you can set the year as @text(@year(@today)) so that it will automatically switch years for you.
You can do other fancy things like show the login name, etc. but when we build sites for clients, we generally make sure that the year formula is in there as computed so there is no need to edit HTML after the new year.
Without having to add the file to your Domino server
Don't use the orange logo you see on most Domino sites
Instead you can use a custom favicon very easily in Struturo. Simply open the DB configuration document and go to the favicon tab and add your custom icon. This will now appear in the URL block and if you use Firefox, it will appear on the tab.
If you need some help creating one from a logo, here are a couple nice sites that you can use to do just that:
Most clients have Lotus Notes so they create the content from the Notes side. But there is a push from some customers to edit from a web browser.
It also helps keep the HTML pure because the web editor can be set to disallow some bad HTML that might otherwise come in from a Notes client. Also, we believe we might be able to make an easier experience to manage content from the web.
Submitting forms to other existing Domino databases
Many of our customers have existing Lotus Notes databases with Web forms for submission. They want to put those forms into Struturo. Here's how to do it.
Overall Approach
The basic approach is to just take the form tags and inputs and put them into a page which will just submit to the current location.
One fairly easy way to do this is to just open the existing form on the web, view the source code, and copy everything from the beginning form tag to the ending form tag and paste it into a page. I say fairly easy because you might have to strip now a lot of the extra information that Domino passes through including font tags and breaks and keyword refreshes. You can add any JavaScript that you need such as for validation or showing and hiding fields using traditional JavaScript methods which I won't cover in this article.
Real World Example
So here we have a traditional Domino Web form for contacting this company.
Copy source and paste into a new page (as HTML)
Customize form tag
You will also have to customize the beginning form tag to do a create document. See the screenshot for details but make sure the action points to the full URL including http and also set the action to create document. FYI - Javascript is disabled at the database level in Struturo.
Clean-up the HTML
Remove any font tags, put ending slashes on input tags and break tags, remove table widths, remove table borders unless you want them, remove keyword refreshes. Our goal is to represent the actions and the look and feel using style sheets and JavaScript, not in-line HTML as Domino typically spits out.
Add a submit button
Because we have disabled JavaScript in a database properties, there is no need to complete Domino's inherent form tag because it won't exist in this scenario. Therefore in most cases you can put a simple submit button at the bottom of your page content.
Modify the $$Return value in the original Domino database to point to a thank you page in Struturo
The thank you page is just a standard page that you would create in Struturo. Simply point to the URL of that page using standard $$Return from the original Notes database.
Add in any Javascript validation as you need
For simplicity, not discussing how to do that in this article. Contact us for support if you need it.
That's it
Your form should submit as usual to the original Notes database you had that collected this form in the first place.
Our warmest congratulations go out to Trust-Factory.com. They are the makers of the famous DNA Network Analysis product for IBM Lotus Domino. Their new website just launched and is running on the latest version of StruturoTM. Visit them at www.trust-factory.com.
The simple tags like title description keywords can be added simply by entering those values into the various fields. For additional meta tags, there is a free-form field on the pages allowing you to enter tags such as site owner necessary for Google's site maps.
Simply go to the advanced tab on the page and you will find access to the meta tags.
Printer friendly is nice but what's even nicer is producing a good result even if the user just chooses File\Print from the menu while viewing a page.
Here's a tip that we use that works really well across browsers. Using style sheets for page layout is great but doing so typically requires fixed width layout to look nice on screen. The problem is that most of the time the page is set to a width that looks nice on the screen but when printing it's too wide.
This article describes a page that only has one navigator column on the left and a content area on the right. But you can take this concept to a three column page as well.
Use percentages that match your column width ratios
The simplest way to produce a nice printed result is to create the print styles with percentages that match closely to the pixel widths defined in the screen version. So, for example, if your left column is 250 pixels and your main column content column is 700 pixels for a total of 950 pixels then you can make an assumption that the left column is approximately 25% of the entire width. You don't have to be perfect here. So, in your print styles, you would specify that column1 (#col1) is 25% with in the main column (#main) is 75% width.
Editing the theme document for print styles
FYI - Not showing all the print CSS. We cut it down to focus on the point of the article.
Easy. Works well cross-browser.
What's nice about this solution is depending on what browser the user's have, the maximum width in pixels varies. So it's hard to be 100% sure that if you set a fixed pixel width overall that you're going to get a decent result across those browsers.
Tip: Exclude background graphics
The other thing that we like to do is exclude background graphics from printing, so if column 1 has a background graphic on it we would typically set the background to white and similarly with the main column (if it has background graphics). Also if there is any content pushed down to account for that graphic, you have to adjust the margin or padding on the top to make a print nicely without the graphic.
Here's what it looks like on the screen
Here's an example that we were working on today. The logo is blurred now because this site is yet to be announced. Also, note the content is totally fake right now. Just copied what was in the template file for now until they get the real content in there.
Print preview in Firefox
A bit blurry because this is the screen capture from the print preview. But looks nice.
Easy way to make one section unique without having to add more HTML content to the page.
Suppose you have a section that requires each H2 tag to have more space above it than all the other pages in the site? Rather than edit every H2 tag in that section by adding a class, wouldn't it be much easier to just add a class to the body tag of that section?
Well this is easy to do in StruturoTM. Simply edit the section document for those pages and add a word into the "Body Class" field. This will put a class tag onto the body tag on all HTML pages in that section.
For example, in the gallery section, it was necessary to space each screenshot header tag slightly differently than the rest of the site. So what we did was add a class called gallery to the Gallery section. So now when you are on the Gallery page, the H2 tag has taller margins than the other H2 tags in the rest of the site.
The CSS is as follows:
body.gallery div#main h2 {margin-top:20px;}
The result is that the Gallery section is easily styled differently than the rest of the site without making any changes to code or HTML. This is a very powerful feature of CSS and results in less coding of content.
