Protoshare Lesson #2 (V6) Multiple Menu Items which set a State and go to a page

In one of my projects I needed to have the same page used twice.  One for each of the States of one of my state variables.  The state values were (BMP. FRANK).   This page would be called from a Menu Sub-selection.  The single page would have a State Value control showing which state was selected from the menu.

Here are what the menu items look like.

ps04   ps05

When the reviewers clicks on Domain Maintenance from with the BMP or FRANK menu select it will set a State Variable to identify BMP or Frank and then go to the Domain Handler Page.

Here are what the hierarchy of the pages look like to handle the menu items above.

ps06

Notice there are the pages that define the sub-menu items.  Domain Maintenance, Roles Maintenance…. for each of the States.

New feature of Protoshare is the ability to name the page with an extensions, that why you see the pages with the (BMP) or (FRANK) in them.

ps08

Notice the handler pages that are being called from the menu navigation pages are not visible to the menu bar because of them being set using

ps07

Now the trick is to get the Domain Maintenance page to set one of the Projects States and then automatically jump to the Domain Handler page.

This will require a Advanced HTML component on the Domain Handler page.  There is a problem here however, if you write HTML that redirects Protoshare to another page automatically you will not be able to edit that maintenance page before it jumps to the handler page.

ps09Protoshare has a SAFE MODE that you can open a page in that allows you to edit pages like this.   Safe Mode allows you to open pages without the HTML triggering.

To do this click on the page you want to edit in the top part of the panel, then in the bottom of the panel called (Page Designs) you Right-click on (Designs) and  on the bottom is the (Open in Safe Mode) option.

 

One of the last prep items it get the ID for the Domain Handler page (Remember that’s the one we want jump to)

ps13

Notice the URL, you should copy it because you’re going to need it for the HTML code

 

I have included a screen shot of the Domain Maintenance page, I normally wouldn’t put this much content on a page that is only open long enough to set a State and Jump to another page but I wanted to use it as an example.

ps10

For the HTML code to work I needed a Global State that I could set to the value that matched the menu selection.  In this case the reviewer clicks on the Domain Maintenance from the BMP sub-menu.

ps12

The state name is gProgram its number is (2048) , I tend to name global States with a prefix of a little {g} an old programmer habit.

Notice the 3 values for the gProgram state

No form selected = Number zero
Benefits Monitoring Program (BMP) = Number 1
FRANK2 = Number 2

Now finally for the code behind the Advanced HTML control that makes this all work.

ps11

Notice Line 8 has the GetState with number  of the gProgram state (2048).

Line 8 also has the setValue to a 1 which actually is the second item in the State BMP.

Line 9 shows URL for the Domain handler page , the one we want to jump to.

 

This code could be greatly shortened but I wanted explain how this little piece of JavaScript and HTML works.

Here is the code in simple text in case you want to copy and paste.


<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta charset=”UTF-8″>
<script language=”javascript” type=”text/javascript”>
function SetStateJumpPage()
{
window.parent.site9.PageStateMgr.getState(‘2048’).setValue(‘2’);
window.parent.location.href = “/wa/page?oid=1004001″;
}
</script>
<title></title>
<style>
body {
font: 13px Verdana;
color: #333;
text-align: center;
}
</style>
</head>
<body onload=”SetStateJumpPage()”>
<p>This page should only display for a few seconds</p>
<p>If the Domain Maintenance Page does not display click button below</p>
</body>
</html>


Here is the Domain Handler page that gets called as a result of the code above.  Notice the State value used in the heading.  If the FRANK menu item had been selected by the reviewer this would have been FRANK2.

ps15

Now a warning, if you use the (Test) PS option to test the maintenance page, it will set the State value and jump to the handler page and the page will go grey.  None of the controls will work on the greyed out page.  The work around is to edit the handler page directly and use the SAFE option to edit the Maintenance page.

This hanging page does not occur when you (Run)the project, run the Exported HTML of the project or run the PS hosted version.  Sometimes when the Amazon servers or the network that PS uses are slow you might see the maintenance page for a brief time before it is replaced with the handler page.

Protoshare Lesson #1 (V6) Get a dynamic date label for current date/time

One of the things missing in Protoshare is a simple component that is a Date/Time field that displays the current date and time.  It needed to be dynamic so when we did presentations they would not have the previous old hard coded date.  We didn’t want to change these dates every time we did a new presentation.  We are lazy.

Here is an example of one of my PS forms with the date/time field outlined.

PS01

The outlined field is an (Advanced HTML) control with some special settings to allow it to blend in with the green background.

ps02

The (Stroke Style) is set to none to eliminate the outline around the Advanced HTML control.

The (Fill Color) is set to transparent to allow the date and time to sit on top of the green background.

The (Show Scrollbars) should be set to Never to eliminate them from displaying on the form.

 

 

 

 

 

 

 

 

Below is the code for the Advanced HTML Block, notice we are using an embedded CSS style to get the text to look like the rest of the text on the form.

By changing the Document.Write statement you can get the date and time to display any way you like.

ps03

Here is the code in simple text so you can copy and paste it into your PS project.


<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
body {
font: 11px Arial;
color: #333;
text-align: left;
}
</style>
</head>
<body>

<script type=”text/javascript”>
var todayDate=new Date();
var date=todayDate.getDate();
var month=todayDate.getMonth()+1;
var year=todayDate.getFullYear();
var hours=todayDate.getHours();
var minutes=todayDate.getMinutes();
var seconds=todayDate.getSeconds();
document.writeln(month + “/” + date + “/” + year);
document.writeln(” “+ hours + “:” + minutes + “:” + seconds);
</script>
</body>
</html>


This may seem like a simple JavaScript trick but I know lots of prototyper’s who are not that experienced at HTML or JavaScript.  This sample trick can be used to put all sorts of text based information from live web sites in to PS pages