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.
3. Choose New button.
4. Type in the button caption and insert the code to be executed after the button is pressed.
5. Now the button is added to your web page. You can drag the button to change its location.
To edit the code, click Edit button code in Properties. You may also edit the code on the Events page. To delete the button, click Remove in Properties.
Here is how different button styles look in generated application.
To make a button look like an icon select "link" button style, select an icon and clear the button label. The result will look like a printer icon above.
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.
You can see the number of elements within the container in the brackets next to it. Click this number to view the elements.
The result looks like this:
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.
Use the following code to show or hide the items:
1) To hide the item insert this code into the Server event:
2) To show the item insert this code into the Server event:
3) For elements in the data grid on the List and Print pages, use the recordId parameter in the After record processed event:
Use the following code for elements in the grid:
The recordId can be obtained:
•with row.id() in Click actions;
•in the Custom button code when the button is inserted into the grid;
•with pageObj.id in Field events;
•with JS: Onload events from Inline Add and Edit.
It's essential that a functional Tri-part event is able to pass data between its parts. For example, the Client Before part receives input from the user, passes it to the Server event. The latter runs some database queries using the data and passes the results to Client after, which shows the results to the user.
Two objects serve as links between the three parts of the event:
•params object passes data from the Client Before to the Server event.
•result object passes data from the Server to the Client After event.
The key names, users, and variables are up to you. You can choose any names here.
You can also pass arrays and objects this way:
Example 1. Inserting an "Add this product to shopping cart" button
For the Edit/View pages, the keys parameter in the Server 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 Server event:
and this code to the Client After event:
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 Server event:
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 Server event:
Example 4. Inserting a button redirecting to another page
To make a button redirect to another page, add the following code to the Client Before event or Client After event:
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, the message needs to be hidden. To do this, add the following code to the Client After event:
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 Server event:
and this code to the Client After event:
For more information, see getCurrentRecord().
To refresh the page, add the following code to the Client After event:
Page Designer articles: