Screen Editor

Page ID: (AU204520)

The Screen Editor page is the visual editor for the source code of an ASPX page and the business logic of a screen. You use this page to configure ASP.NET containers (such as forms and grids), and to specify the properties of UI controls and grids.

Tip: You can open the Screen Editor page in a variety of ways, including by clicking the screen ID (of the form you want to customize in the navigation pane of the Customization Project Editor. You can also open it from other pages, such as Customized Screens page. In the actual name that appears on the page, Screen Editor: is followed by the screen ID of the form being customized and then the screen name in parentheses.

Page Toolbar and More Menu

The page toolbar includes standard buttons and page-specific buttons and commands. For the list of standard buttons, see Page Toolbar. The page-specific commands can be shown as buttons on the page toolbar, as commands on the More menu, or in both places. These commands are listed in the following table in alphabetical order.


Command	Description
Customize Business Logic	Opens the Code Editor page with the extension class template of the business logic container (BLC) that is bound to the form.
Customize Data Class	Opens the Data Class page for customization of the DAC that contains the field selected in the control tree.
Edit Aspx	Opens the ASPX Editor page with the webpage source code.
Open Screen	Opens the original form of MYOB Advanced.
Preview Changes	Opens the customized form in a new browser window.

Control Tree

The control tree of the Screen Editor contains a list of the elements that are displayed on the form and the layout rules that organize the elements into rows and columns. (You can see the list of controls that can be added to a form on the Add Controls tab of the Screen Editor.) In the tree, you can do the following:

Select a container, a control, or an action, and then review or customize its settings by using the tabs of the page.
Change the order of controls in a container. To do this, you drag controls on the control tree within their containers.
Remove any selected item from the webpage or reset the properties of the item to the out-of-the-box state.

The toolbar of the control tree includes the following buttons.


Button	Description
Refresh	Refreshes the control tree.
Remove	Removes the item selected in the control tree from the form.
Reset Properties	Resets all controls and actions to the out-of-the-box state.

The following screenshot shows the actions of the Customers (AR303000) form, as displayed in the control tree. The first element of the control tree is the DataSource node (see Item 1 in the screenshot), which contains all actions defined for the form. The actions displayed on the form toolbar and on the More menu are located in the Toolbar node. This node contains standard actions (the Standard node; Item 2) and form-specific buttons (the Form-Specific node; Item 3). Form-specific actions are listed under their category on the More menu (Item 4). All other actions of the form (such as table toolbar buttons and commands and buttons of the dialog boxes) are located in the Other node (Item 5).

The remaining top-level elements are containers:

Form: BAccount: This node (see Item 6 in the screenshot above) represents the form's Summary area.
Tab: CurrentCustomer: This node (Item 7) represents the tab area of the form and contains tab items.
Dialogs: This node (Item 8) contains the settings for all dialog boxes that are defined in the ASPX code of the page.

The top element of each container is an element of the Column or Row type that specifies the layout rule for the elements located inside it.

Layout Properties Tab

On the Layout Properties tab, you review and modify the layout properties of the form controls or actions that are defined on the ASPX page.

The tab contains a table toolbar and a table. The table toolbar includes the Hide Advanced Properties button (), which you can use to hide or show the advanced properties of the selected control. The tab table consists of the following columns.


Column	Description
Override	A check box that indicates whether the property value has been changed. This check box is selected automatically when you change the property value.
Property	The name of the property or the property group.
Value	The value of the property.

Attributes Tab

You use the Attributes tab to review and customize the attributes of the DAC field that is bound to the control currently selected in the control tree. The tab consists of elements that hold the DAC field information and buttons to customize the field attributes.

Table 1. Attributes ElementsThe tab contains the following elements.
Element	Description
Data Class	The name of the DAC to which the field belongs.
Field Name	The name of the field in the DAC. The field name is the name of the public virtual property in the public abstract class of the field.
Original Attributes	The original attributes of the field in MYOB Advanced.

Table 2. Attributes ButtonsThe tab has the following buttons.
Button	Description
Customize Attributes	Opens the Data Class page so you can customize the field attributes in the DAC.
View Source	Opens the Data Access tab of the Source Code (SM204570) form so that you can browse the DAC source code.
Override on Screen Level	Opens the Code Editor page with the BLC extension class template. The template includes the field attributes and the template of the DACName_FieldPropertyName_CacheAttached() method, which you can use to replace the attributes within the BLC.

Events Tab

On the Events tab, you view and add event handlers for the selected control.

The tab consists of summary elements and a table (which has a toolbar).

Table 3. Events ElementsThe tab contains the following elements.
Element	Description
Data Class	The name of the DAC to which the field belongs.
Field Name	The name of the field in the DAC.
Business Logic	The name of the BLC bound to the form.

Table 4. Table ToolbarThe table toolbar includes the following table-specific buttons.
Button	Description
Add Handler	For the selected event (that is, the event that you have clicked in the table), opens the Code Editor page with the BLC extension class template. The class template includes a code template for the event handler, so you should implement only the body of the handler. The button provides the following menu commands: Keep Base Method: Creates the event handler with two parameters, as it is defined in the base BLC. As a result, the event handler is added to the appropriate event handler collection. Override Base Method: Creates the event handler with an additional parameter to replace the base BLC event handler collection.
View Source	Opens the Source Code browser with the source code of the BLC bound to the form.

Table 5. Table ColumnsThe table holds information about the event handlers used for the selected control. It contains the following columns.
Column	Description
Event	The event name.
Handled in Source	A check box that indicates whether the event handler is implemented within MYOB Advanced.
Customized	A check box that indicates whether the event handler is customized. This check box is selected automatically when you add the event handler.

Add Control Tab

You can use the Add Control tab to easily add new containers, controls, and layout rules to the form you are modifying. The tab has the Main Containers, Layout Rules, and Other Controls sections with rectangles for the types of controls in the sections.

The Main Containers section has rectangles for each of the following controls, which you can add: Form, Tab, Tab Item, Grid, and Pop-Up Panel.

The Layout Rules section has rectangles for each of the following controls, which you can add: Row, Column, Group, Merge, and Empty Rule.

The Other Controls section has rectangles for each of the following controls, which you can add: Panel, Group Box, Radio Button, Label, Button, and Java Script.

To add a control, you drag its box from this tab to the needed position in the control tree. After you have added the control, you specify its properties on the Layout Properties tab.

Add Data Fields Tab

You use the Add Data Fields tab to manage the controls in the form container that is currently selected in the control tree. On this tab, you can create a control for a DAC field and add it to the selected container. You can also create a new custom field in a DAC, create a control for the field, and add it to the selected container.

The tab contains the Data View drop-down list and a table with a table toolbar and three filters you can use to view the needed fields.

Table 6. Add Data Fields ElementThe tab contains the following element.
Element	Description
Data View	The DAC whose fields you want to view in the table. The drop-down list includes all DACName(DataViewName) pairs of the BLC that are bound to the form.

Table 7. Table ToolbarThe table toolbar has the following buttons.
Button	Description
Create Controls	Adds the selected fields (that is, those for which you have selected the unlabeled Included check boxes in the table) to the container selected in the control tree.
New Field	Opens the Create New Field Dialog Box, which you can use to add a new custom field to the DAC that is referenced in the data view selected in the Data View box. Note: Once you have created a field or multiple fields, you need to publish the customization project before you can create a control for the new fields.

Table 8. Table ColumnsThis table displays the fields that belong to the selected DAC. The table includes the following columns.
Column	Description
Included	An unlabeled check box that you use to include this field in processing when you click Create Controls on the table toolbar. This processing will create a control for the field in the container that is currently selected in the control tree.
Used	Read-only. A check box that indicates whether a control for the field exists in the object that is currently selected in the control tree. The system selects this check box automatically when you create a control for the field.
Field Name	The name and DisplayName (in parentheses) of the field in the DAC.
Control	The type of the UI control.

Table 9. Filter TabsYou can use the following filter tabs to select which DAC fields you want to display in the table.
Filter	Description
All	All fields of the selected DAC that are not represented by controls on the form.
Visible	The fields that are visible because of the Visibility field attribute in the selected DAC.
Custom	The new custom fields of the selected DAC.

View ASPX Tab

The View ASPX tab displays the ASPX code of the control selected in the control tree.