Show/Hide Toolbars

Navigation: Using ASPRunnerPro > Page Designer

PHPrunner32x32     ASPRunnerPro manual


Insert button

Scroll Prev Next More

Adding buttons

To add a button to a web page:

 

1.Proceed to the Page Designer and select a page you wish to modify.

 

2.Click Insert - Custom button on the Main toolbar.

custom_button1

 

3. Choose the New button.

custom_button2
yellowbulbNote: Already added custom buttons appear in the Insert -> Custom button window, so that you can re-use them. Any changes in the button code are made in the copies as well.

 

4. Type in the button caption and insert the code to be executed after the button is pressed. You can add both client-side (Javascript) and server-side (ASP) events. Click OK.

insert_button_code

 

5. Now the button is added to your web page. You can drag the button to change its location.

custom_button3

 

To edit the code, click Edit button code in Properties. You may also edit the code on the Events page. To delete button, click Remove in Properties.

custom_button4

Inserting containers

The container is a specific dropdown element in which you can insert other elements using drag-n-drop.

 

To insert a new container, do Insert -> Custom button -> New dropdown, then drag-n-drop it to any place you want.

insert_button_dropdown

You can see the number of elements within the container in the brackets next to it. Click this number to view the elements.

insert_button_dropdown2

The result looks like this:

insert_button_dropdown_result

Insert button into datagrid

You can insert a button into a data table to make it apply to each data record on a web page.

 

Switch to Advanced Grid first. Then do Insert -> Custom Button -> New Button. Then drag-n-drop the button to the grid or anywhere where it needs to appear.

insert_button_grid
insert_button_view

yellowbulbNote: a button inserted into a datagrid works only if you select a key field for the table on the Choose page screen.

 

You can use the rowData and $button objects to program buttons inserted into a grid.

Hiding custom buttons

Select the button and click the '?' within the Item ID section on the right. It shows code examples of how to hide the button conditionally both on the server side and on the client side in ASP and Javascript.

insert_button_hide

 

yellowbulbNote: code examples already use correct Item ID, and you can copy and paste it to your code.

Passing data between events

1. Passing parameters from a ClientBefore event to an OnServer event.

 

Add the following code to the ClientBefore event:

 

params["test"]="Some value";
params["name"]="My name";

 

In the OnServer event use $params["test"] to access the value of a parameter named "test".

 

DB_Exec( "insert into log (text) values ('" & DB_prepareSQL(params("test"))& "')"

 

2. Passing parameters from the OnServer event to the ClientAfter event.

 

OnServer event:

 

DoAssignment result("response")="Server response"

 

ClientAfter event:

 

alert(result["response"]);

Examples

Example 1. Inserting an "Add this product to shopping cart" button

For the Edit/View pages, the $keys parameter in the OnServer event contains the information about the current record. You may use $keys["KeyFieldName"] to access a specific key column.

 

For example, there is a Products table. To insert an Add this product to shopping cart button on the View page, add the following code to the OnServer event (Server tab):

 

dim record, ShoppingCart
DoAssignment record, button.getCurrentRecord()
if not isnull(record("ProductID")) then
  'add new records to the ShoppingCart table
  'save current username in the UserID field
  set ShoppingCart = dal.Table("ShoppingCart")
  ShoppingCart.Product = record("ProductID")
  ShoppingCart.Quantity = 1
  ShoppingCart.UserID = Session("UserID")
  ShoppingCart.Add()
end if
result("txt") = "Product was added"

 

and this code to the OnAfter event (Client After tab):

 

var message = result["txt"] + ".";

 

For more information about using the Data Access Layer (DAL), see Data Access Layer.

Example 2. Send records selected on the List page via email

To send records selected on the List page via email, add the following code to the OnServer event (Server tab):

 

email_msg= "List of records"
i=1
DoAssignment record, button.getNextSelectedRecord()
do while isObject(record)
  email_msg=email_msg & "Record: " & i & vbcrlf
  email_msg=email_msg & "Make: " & record("make") & vbcrlf
  email_msg=email_msg & "Qwerty: " & record("qwerty") & vbcrlf
  email_msg=email_msg & vbcrlf
  DoAssignment record, button.getNextSelectedRecord()
  i=i+1
loop
'send email
email = "test@test.com"
subject = "Sample subject"
sendmail email,subject,email_msg

 

For more information see getNextSelectedRecord().

Example 3. Modifying the value of a field for all selected records on the List page

To modify the value of a field for all selected records on the List page, add the following code to the OnServer event (Server tab):

 

dim record, strUpdate
DoAssignment record, button.getNextSelectedRecord()
 
do while isObject(record)
 strUpdate = "update Invoices set Status='Paid' where InvoiceID=" & record("InvoiceID")
 CustomQuery(strUpdate)
 DoAssignment record, button.getNextSelectedRecord()
loop

Example 4. Inserting a button redirecting to another page

To make a button redirect to another page, add the following code to the OnBefore event (Client Before tab) or OnAfter event (Client After tab):

 

location.href="http://cnn.com";

Example 5. Showing a message to the customer for a limited time

Let's say you have a button that retrieves a piece of sensitive info from the server that needs to be shown to the customer for a short time. After that, this message needs to be hidden. To do this, add the following code to the OnAfter event (Client After tab):

 

// this message includes the SSN retrieved from the server
var message = result["txt"];
ctrl.setMessage(message);
 
// clear the message after 5 seconds
setTimeout(function(ctrl) {
 ctrl.setMessage("");
}
, 5000, ctrl);

Example 6

Let's say you want to add a button to the View page that redirects to one of the application pages, depending on the value of the Category field. To do so you may add this code to the OnServer event (Server tab):

 

'get the value of the current record and pass it to the ClientAfter event
DoAssignment result("record"), button.getCurrentRecord()

 

and this code to the OnAfter event (Client After tab):

 

if (result.record["Category"]=='Schools')
 location.href="Schools_list.asp";
else if (result.record["Category"]=='Organisations')
 location.href="Organisations_list.asp";
else if (result.record["Category"]=='Careers')
 location.href="Careers_list.asp";

 

For more information see getCurrentRecord().

Example 7

To refresh the page add the following code to the OnAfter event (Client After tab):

 

location.reload();