×
Created with ZedIndex

Basics for building a page with MA!N Web

Last updated: August 10, 2022

Building a web page in MA!N looks a lot like building dynamic windows (forms). There are some key differences, and that’s why we recommend you to follow the explanation and guidelines below.

First:

  1. Start the MA!N desktop application.
  2. Go to menu bar and select View.
  3. Select Configuration > Commands.

A separate command window opens.

The commands window is a standard MA!N window in which you build dynamic forms. You make it visible through the menu view (View => Commands) in the menu bar.

After opening the commands window, the container application shows the commands window as a ‘fixed’ positioned window.

Empty MAIN container Window

Create or edit a command

Select “New” or “Edit” and a separate window “Edit command” appears. For now, only Command ID, Description, Active, and Command will be highlighted. The other elements aren’t relevant for the dynamic forms.

Command window in MAIN for adding code
  • Command ID: each dynamic form has a unique command ID which is assigned by MA!N after saving the command. Other forms or commands can call this form by its ID. ID’s can change when moving Commands to another environment.
  • Command ID Reference: this looks a bit like the Command ID, but the Command ID reference is a unique ID that you assign as a developer. The regular Command ID is assigned by MA!N. Other than the regular Command ID the Command ID reference never changes.
  • Description: choose a description for the dynamic form. This description appears in the list with commands. Note that this is not the title of the window.
  • Active: selecting this option marks the form as active in the database
  • Command (area in the lower left): the command area is the place where you type (or copy) the XML tags and SQL commands. MA!N uses this code for building the dynamic forms.

Use the following format as default:

“Dynamic Form: Form_[user friendly name]”

==Example: “Dynamic Form: Form_SearchBox”.

The screenshot shows additional text (Form). With MA!N web we prefer to add a description to an ID like Form, Label, etc. It improves the readability of the ID.

Tags

MA!N web has many tags that you can use in the XML file.

Most used tags

The most used tags are:

  • XML: Every dynamic form has to start with the tag \<?xml version=’1.0’?>.
  • AddControl: used with data grids. We recommend setting this to False by default for better CSS styling and to ensure control over the data grids.
  • Caption: This tag contains the title of the window. You can leave this empty with MA!N web and add a Label for adding a title.
  • Columns (in a Data ID): used for showing/hiding columns and formatting them. We recommend doing styling in the CSs where possible..
  • Columns (in a Control): column options and behaviour.
  • Control: the controls tag holds the definition of the controls displayed on the page. Commonly used controls are the datagrid and buttons..
  • CssClass: optional for adding a CSS class. This can be a custom class or one from the CSS library.
  • Data: The data section holds the definition of the data displayed on the window. You can edit this in the rest of the form. Each group can only hold 1 data section.
  • Form: These are the container tags of the dynamic form.
  • Select: SQL query
  • ReadOnly: bewerken/niet bewerken
  • Settings: control grid characteristics.
  • Text: option for adding text directly or for adding text through a Select.
  • Type: define the type of item (e.g., panel or label).

Note: MA!N Web doesn’t use the <Group> tag.

Required tags

Some tags require certain tags.

Form:

  • Form
  • Caption

Data:

  • Data
  • Select

Control:

  • Control
  • Type

The other tags depend on the type of Control.

Column (used in a Control):

  • Column
  • AddControl
  • ReadOnly

General guide lines

  1. Data ID: apart from in MA!N desktop, the Data ID(s) can’t be placed inside a control tag. The best practice is to place the Data ID before the controls.
  2. Controls: with the controls, you create the actual web page. The order in which the page displays the items by default is similar to how you define the Controls within the XML.
  3. Use Command Reference ID: for MA!N web it’s best to use Command Reference ID instead of Command ID. It’s unique and MA!N also uses the Command Reference ID for the structure of the URL.

Next up