The outline Notes design element is pretty handy to build navigation for your Notes client, but we found one drawback. If you have collapsable entries, then you're limited to the standard twisy images (the dark blue ones). This color may or may not go with your application's color scheme.

You can change the image to a different image, but then you don't get the effect of the image changing when you expand or collapse the category.

However, we have found a work around. It's a little strange, but it works as long as you're not developing in the same application at the same time you're using it. For whatever reason, there's a problem in that situation.

First, design the images you want to use for the outline category when collapsed and the outline category when expanded. This could be as simple as taking the standard expand and collapse images and changing the color.

Next, import those images into image resources in your application.

Now go in to your outline. For each category you want to expand, you will end up with two lines - one that will show when the line is collapsed and one that will show (along with the child lines) when the line is expanded. For example, let's say you have "Line 1" with "Subline 1" and "Subline 2" underneath. In the design of your outline, you will have "Line 1" with the image associated with the collapsed line, then "Line 1" again with the image associated with the expanded line, and "Subline 1" and "Subline 2" under the expanded version of "Line 1".

Add hide-when formulas to each of the lines. For the collapsed version of "Line 1" the hide-when formula should be @Contains(@Environment("MyNav"); "~1~"). For the expanded version of "Line 1" and all its children ("Subline 1" and "Subline 2"), it should be !@Contains(@Environment("MyNav"); "~1~").

Basically, you are either showing the collapsed line or all the expanded lines based on a value in an environment variable. The name of the environment variable ("MyNav" in this example) is irrelevant, but will need to remain constant throughout the entire outline.

Repeat this process of duplicating the top-level category and adding the hide-when formulas. For each category, change the "~1~" to be another number. For example, the second expandable row would use "~2~" in its hide-when formula.

Now, to make it all work, add an action to the top-level row. Normally, the top-level row doesn't have an action associated with it, but now it will. The Content Type is "Action". With this content type, you can enter a formula to run when clicked. For the "Line 1" row when collapsed, the action is:
ENVIRONMENT MyNav := @Environment("MyNav") + "~1~";
@SetTargetFrame("Left");
@Command([OpenPage]; "MyNavigationPage")

This is doing a couple of things. First, it is adding the string "~1~" to the environment variable (the same one in the hide-when formulas). Next, it is re-opening the same page in the same frame of the frameset. So you may have to change the frame name and name of the page holding the outline to fit your application.

For the formula to run when the "Line 1" row is expanded, the action is:
ENVIRONMENT MyNav := @ReplaceSubstring(@Environment("MyNav") + "~1~"; "");
@SetTargetFrame("Left");
@Command([OpenPage]; "MyNavigationPage")

This is removing the string "~1~" from the environment variable (the same one in the hide-when formulas) and re-opening the page in the same frame of the frameset.

Now, to really understand what's going on here. First, let's assume that "Line 1" in our example is collapsed. So only "Line 1" is being shown. When that line is clicked, the action says to add "~1~" to the environment variable and reload the page. The outline on the page will then re-evaluate the hide-when formulas and see that the expanded version of "Line 1" should be shown along with "Subline 1" and "Subline 2". Those lines are hidden when the environment variable does NOT contain "~1~", so they are shown when it DOES contain that.

The reason for the tilde character before and after the number is in case you have 10 or more categories. If "1" was used instead of "~1~", then expanding the line based on "10" would also expand the line based on "1".

One final note: you'll probably want to collapse all the categories when the user first enters the page. To do this, go to the PostOpen event for the entire database and add this code:
ENVIRONMENT MyNav := "";
@SetTargetFrame("Left");
@Command([OpenPage]; "MyNavigationPage")

This code will clear the environment variable and re-open the page so the user will see all categories as collapsed.