Articles
Da Honey Pot
About meBizzyBee’s BizzyThoughts
Archive for the 'Interface' Category
Did you ever play with the InViewEdit event? Do you also believe it’s a bit of a dangourous feature? Users that accidentally change documents because they click an editable cell? I know, there are ways to prevent this from happening in code, but a good indication of what cells can be edited (and thus “be careful when you click those”), could help. Also, this helps the user in viewing what cells can be edited from within the view.
In the example below, can you tell what cells are editable?
After creating a Notes Mail Database Size Indicator - graphic version, a version for Notes 8 Standard was introduced on Conxsys Blog.
This is a nice peace of work. The only thing I wondered: why would I need it, if you have a mail indicator as a standard feature on the Notes server? Some weeks later I found an answer on this question myself: with my client, they installed Notes 8 Basic (unfortunately not my decision) while keeping the Notes 6.5 server as running platform (unfortunately not my decision).
I saw a post on IdeaJam asking for a solution to this problem.
The thing is: if you have an action button on top of an embedded view and this button tries to run code that refreshes or saves the uidoc (t.i. the document that has the embedded view on it), this will crash your client.
Everybody has seen this mirror effect in modern webdesign. Maybe you have an overdose by now, but I want to show how simple it is to create such effect in Fireworks. In this tutorial movie I demonstrate how to create such mirror effect in approx. 1 minute.
Remember last week’s Notes Mail Database Size Indicator? Mike O’Brien and John Head referred to Notes 8.01, where this will be included. I liked my solution, but after seeing the screenshot, it looked a bit pale.
The new challenge was to give it a more graphical look. So I created another version, still very easy to implement, but with a better look. It conditionally displays an image of the total and used space:
- A green bar for used space less than 70%
- An orange bar for 70-89%
- A red bar for 90-100% (and up)
- A gray bar if no quotum exists.
Wouldn’t it be cool to have this in your mailbox?
.
Our local admin asked me if this is doable, and I thought it was a brillant idea and a very practical example on how to use this tip: A progress bar in Lotus Notes
It’s an indicator that, eh, indicates how much space you’ve used from your mail database size quotum.
Years ago, I was wondering if it was possible to play Flash content in the Notes Client. But the interest for it disappeared, because it didn’t serve any real purpose then. Until I saw IntelliPRINT’s Dashboard Reporting: they use FusionCharts, the tool I spoke about earlier, to display its amazing charts in the client.
Now thàt is something great! Just imagine you sending an email to your boss with an impressive chart in it. But then it seems the boss is not so happy with the figures. You just act surprised, change the figures in the background, tell him he must have been mistaken, he reopens the mail to check back et voilà, an updated chart is shown! 
I updated the Charts demo database to include this Notes Client example. Do a preview of the form NotesClient in the client to see the result (but do a preview of the Charts page in the browser first to start a websession)
I like rounded corners. It makes life less edgy. Gives some curve to my existence. I started wondering how this could be achieved in the client. In the browser there are tons of techniques to find. I did some research for the client and found a post from Ben Langhinrichs about it.
He used image borders for it, and the results are surprisingly good: Domino rescales the corners in a not-so-bad way!
But I miss some things:
- What about exact corners? You wanted small corners, but they grow bigger if your table gets bigger with this technique.
- What about gradients, often used, but not possible here?
I gave it a second thought, experimented a little and came up with 6 ways to create different types of rounded corners. They’re not really all that different, but depending on what you’re trying to achieve and your graphical skills and tools, you can choose an approach.
Layers in the Notes Client? Why would I use them? On the web, with css-based designs, I can see why, but in the Client? That was my opinion until a week ago. I thought they were cool, but I didn’t really had a place for them in my applications. But then there was a guy called Basir Noutash, who sent me a form with a layer in it as some kind of dialog box.
“Hmm… good thinking”, I thought. And “what else could there be done with it?” I started to experiment and came up with 5 possible uses for layers.
A layer can be:
- a dialog box
- a text popup
- an image lightbox
- a wizard
- a way of protecting content
I’m in the process of altering a travel application for my current client. The application serves as a way of requesting permission to travel for the company and registering travel expenses.
In such process, I always try to make some design changes to enhance the user experience. So I hope :-).
One particular part I’d like to share is the design of some dialogboxes. As an example, I want to show the Flight dialogbox, where flight information is filled out.
The problem
Below you see a little table. It has some rows, some colors, some borders, the usual. As table as a table can be.
One remark: the last row has a hide-when formula on the cells, so when certain conditions are met, the row is hidden and this is how it looks like then:
The hide-when formula not only hides the cells, but also the top border of them, resulting in a table with an open end. Obviously, that’s not what we wanted here!
Say we have a tabbed table and you want to add some text in one of the content cells. No problem here.
Now say we want to add a subform with text in te content cell: troubles! It will look like this:
Again 2 pictures, a side-by-side comparison. Snapshot of a view. Find the 3 differences!
In this article I posted a solution to collapse/expand all sections on a Domino web page. However, there was one issue with it: it doesn’t work in Firefox, because Domino renders different html for sections in non-IE browsers.
In non-IE environments, expanding a section means that a request is send to the server to retrieve the section data. This is silly, because the code for this to happen clientside shouldn’t be that different from the IE javascript.
This post is about how to create collapse/expand sections that work in all browsers (as long as JavaScript is enabled). It’s an alternative for this solution, for people who are wanting to put a little more effort in it.
Let’s start with a demonstration before explanation.
A little warning: the little twisty icons don’t show up in my demo page, because I cannot put the default Domino twisties where they should belong. This shouldn’t be a concern for you: if you copy/paste the source of that page in a Domino page and mark the page as html, this should work for you.
UPDATE: if you’re ready to put a little more effort in the implementation, this cross-browser solution is more suitable.
A post on Notes.Net inspired me today: somebody asked how you can expand/collapse all sections in a document on the web with the click of a button.
This is the code I came up with. Throw it in the JS Header of the page and call it with a button (here I used 2 separate functions for the expand and collapse, but it can’t be that hard to make it one button if desired).
My very first article here was about how to create good looking charts from your data.
I found a tool that produces even better looking results in the browser. Take a look at this:
If we create an application and we don’t create an outline for them, they look like the left image below. A lot of Notes applications today still look that way. Why is that? We don’t have time for refactoring!
I want to proove that time is not the issue here. I claim that the outline on the right can be made in 5 minutes. Try it for yourself and get some help from this Outline Demo Database.
The green triangles in Notes views is a typical Notes thing. Nothing wrong with that… especially for history classes. In 2007, we want to customize these.
Take a look at the picture before and after the twisty makeover:
A tip, or more like a mental note: were you ever in the following situation? You try to make a table cell smaller, but the value isn’t taken, the cell stays too wide?
1. Always set row and column spacing first
If you create a new table, it doesn’t come with any margins or padding, so the text basically sticks to the sides of the cells. The first thing you should do is adjust row spacing and column spacing so that the table content gets a little extra air. Table contents wants to breathe, so give it some room.
(No Ratings Yet)
Loading ...