Web Design
Web Design
2011 MRI Software. Any unauthorized use or reproduction of this document is strictly prohibited. All Rights Reserved.
2011 MRI Software, LLC Any unauthorized use or reproduction of this document is strictly prohibited. All Rights Reserved.
Table of Contents
Table of Contents ........................................................................................................i
Course Overview ........................................................................................................ I
Module 1: Database Schema Overview ......................................................................1
Lesson 1: Understanding the MRI System Table Structure ................................................. 3
Lesson 2: Understanding the CM and RM Table Structure .................................................. 7
Lesson 3: Understanding the GL Table Structure ............................................................ 14
Module 2: Getting Started in Web Design ................................................................17
Lesson 1: User Interface ............................................................................................. 18
Lesson 2: Components of MRI for Web Interface ............................................................ 20
Lesson 3: MRI Web Structure ....................................................................................... 23
Lesson 4: User Interface Components ........................................................................... 25
Lesson 5: MRI User Interface and Database ................................................................... 29
Module 3: Activity Groups and Pages .......................................................................31
Lesson 1: Creating Activity Groups and Pages ................................................................ 32
Lesson 2: Copying Activity Groups and Pages ................................................................ 35
Lesson 3: Divs and Spacers ......................................................................................... 38
Module 4: Objects in Web Design ............................................................................41
Lesson 1: Object Properties ......................................................................................... 42
Lesson 2: Adding Objects to Pages ............................................................................... 45
Lesson 3: Setting Tab Order on a Page ......................................................................... 49
Module 5: Grid Objects in Web Design .....................................................................51
Lesson 1: Creating a Grid ............................................................................................ 52
Lesson 2: Adding Command Buttons to Insert and Delete Grid Rows ................................ 57
Lesson 3: Adding a Dropdown List to a Grid Column ....................................................... 59
Lesson 4: Setting Default Values in a Grid ..................................................................... 61
Lesson 5: Adding a Calculation Field to sum a Grid Column.............................................. 63
Module 6: Creating a Selection/Lookup Page ..........................................................65
Lesson 1: Creating a Selection/Lookup Page .................................................................. 66
Lesson 2: Setting Up Search Fields ............................................................................... 68
Lesson 3: Setting Up the Grid to Use Search Fields ......................................................... 70
Lesson 4: Setting Up the Search Button ........................................................................ 72
Lesson 5: Setting Up the Hyperlink ............................................................................... 73
Module 7: Linking Pages in MRI Web .......................................................................75
Lesson 1: Creating Links to Pages ................................................................................ 76
Lesson 2: Creating a Frame ......................................................................................... 81
Introduction
Welcome
Welcome to the Web Design training. This course was designed to
familiarize participants with the basics of creating Web pages in the
Web Design application.
Web Design is a tool that enables MRI users to edit the web pages
in MRI for Web. It also gives the ability to create new pages and
add new fields to the MRI for Web Interface
Course Outline
A typical training day goes from 9:00 a.m. – 5:30 p.m. with the
following breaks:
Objectives
After completing this module, you will be able to:
• Understand the MRI System Table Structure
• Understand the CM and RM Table Structure
• Understand the GL Table Structure
• Understanding the CM and RM Transactional Table Structure
Purpose
The purpose of this lesson is to provide you with a general
understanding of some of the underlying MRI system tables.
Objectives
After completing this lesson, you will be able to:
• Understand where MRI table and field structures are stored
• Find the primary key of a table
• Find the foreign key relationships of a table
Table Description
MRITABLE All tables in the database
MRITABLE
MRITABLE lists every table in the database, along with descriptions,
which module each table belongs to, the date and user who created it,
etc.
MRIFIELD
MRIFIELD lists every field in every table in the database, along with
information about the field type, length, etc.
MRIINDEX
MRIINDEX lists every index, including primary keys, on every table in
the database.
Example
The MRIRELN table lists every relationship (foreign key) between any
two given tables in the database. All relationships in MRI are “many-
to-one”, meaning that for one record in the “primary” table, many
records can exist in the “foreign” table. Consider the relationship
between MRITABLE and MRIFIELD. In the MRIFIELD table, the
TABLENAME field must reference a valid table in MRITABLE—but for
any given record in MRITABLE, there can be (and almost always are)
many records in MRIFIELD. In this relationship, MRITABLE is
considered to be the “primary” table (the “one” side of the
relationship), and MRIFIELD is considered to be the “foreign” table
(the “many” side of the relationship).
What fields in the BLDG table reference other tables in the database?
SELECT * FROM MRIRELN WHERE FOREIGNTBL=’BLDG’
Purpose
The purpose of this lesson is to provide you with a general
understanding of CM and RM Table Structure.
Objectives
After completing this lesson, you will be able to:
• Understand the basic CM table structure
• Identify relationships between the main CM tables
• Understand the basic RM Table Structure
• Identify relationships between the main RM tables
Table Description
BLDG Building table
BLDG
The BLDG table contains one record for each commercial building.
CMPD
The CMPD table stores the current CM period for each building.
SUIT
The SUIT table contains one record for each suite in every building.
MOCCP/LEAS
The LEAS table holds one record for each lease. A given LEAS record
can be thought to represent the physical lease document for a
particular suite. The MOCCP table represents the “master occupant,”
which represents a tenant. A single MOCCP record might be associated
with one LEAS record, or if the tenant is occupying multiple spaces,
there can be many LEAS records associated with a single MOCCP.
When a first generation lease is created in MRI, both an MOCCP and
LEAS record are created.
CMRECC
All past, current, and future recurring charges for each lease are
stored in the CMRECC table.
INCH/SECINCH
Income categories such as “rent” or “common area maintenance” are
setup as codes in the INCH and SECINCH tables. INCH contains rental
codes, SECINCH contains security deposit codes.
GLMT/SECGLMT
“Master Interface Chart”: The GLMT and SECGLMT tables determine
how journal entries in GL will be created from transactions in CM.
Table Description
RMPROP RM Property table
RMPROP
This table lists all properties in the database. A property typically
represents an entire residential apartment complex.
RMPD
The RMPD stores the current RM period for each property.
RMBLDG
Each physical building in a residential property is recorded as a
different record in the RMBLDG table. This table is used mostly for
grouping and unit identification.
CLSS
Each type or class of unit within a property is listed as a record in the
CLSS table. Default information for each unit in a class includes
pricing, amenities, number of beds and baths, and square footage.
UNIT
The UNIT table contains a record for each unit in a property.
RMLEASE
Each residential lease is stored as a separate record in RMLEASE. Each
new resident results in a new RMLEASE record.
RMRECC
All past, current, and future recurring charges for each lease are
stored in the RMRECC table.
NAME
All residents, co-residents, roommates, prospects, and applicants are
stored in the NAME table.
PROSPECT
All prospective residents are stored in PROSPECT as well as in NAME.
When a guest card or phone card is entered, a record is created in
both NAME and PROSPECT.
CHGCODE/SECCODE
Charge code categories such as “rent” or “utilities” are setup as codes
in the CHGCODE and SECCODE tables. CHGCODE contains rental
codes, SECCODE contains security deposit codes.
RMGLMT/RMSECGLMT
“Master Interface Chart”: The RMGLMT and RMSECGLMT tables
determine how journal entries in GL will be created from transactions
in RM.
SCHD
The SCHD table contains all activities from the RM scheduler, such as
move-ins, move-outs, and transfers.
Purpose
The purpose of this lesson is to provide you with a general
understanding of GL Table Structure.
Objectives
Table Description
GLCD Chart of accounts header table
PERIOD GL calendar
GLCD/GACC
GLCD contains one record for each chart of accounts in MRI. The
default chart is “MR”.
GACC contains one record for each account in the chart.
JOURNAL/GHIS
All detail transactions in GL are stored in JOURNAL or GHIS according
to their period. Current and future transactions are stored in JOURNAL;
historical transactions are stored in GHIS.
GLSUM
All activity entered into JOURNAL or GHIS is accumulated into balances
in GLSUM by ACCTNUM, ENTITYID, PERIOD, BASIS, and DEPARTMENT.
All financial reports in MRI, aside from the general journal report,
compute account balances and activity from GLSUM, not from the
detail tables JOURNAL/GHIS.
ENTITY
An entity in MRI represents the financial aspect of a property.
Typically an entity represents a single building or property, but you
can set up an entity that has no properties associated with it (in the
case of a cost center) or multiple properties (in the case of an office
park or multi-use building).
PERIOD
The PERIOD table keeps track of the current GL and AP period for each
entity.
BMAP
The BMAP table defines the relationship between entities, banks, and
cash accounts in your chart.
The BMAP table is involved in any cash transaction involving the entity,
including checks cut from Accounts Payable and cash received in
Commercial Management or Residential Management.
Objectives
After completing this module, you will be able to:
Objectives
After completing this lesson, you will be able to:
Overview
When you first enter Web Design, a unique tool bar offers several
shortcut buttons and icons you can click to perform different functions.
Tool Bar
Objectives
After completing this lesson, you will be able to:
• Identify and use the Menu Items and Toolbar Icons used in
Web Design
Overview
Before you can begin to use Web Design, you must understand the
structures that comprise the MRI for the Web interface. This section
describes
• Pages
• Activity Groups
• Menus
What is a Page?
The concept of a Page in Web Design is exactly the same as a web
page that you would pull up with your browser at home. In MRI for the
Web, pages enable you to create, modify, and view the records in a
database table. Pages are composed of objects. An object is any item
that appears on a page, such as a field, option button, grid, or label.
What is an Activity Group?
In Web Design, all pages are organized into related groups called
Activity Groups (similar to a view in ViewDesign). An activity group
typically contains a:
• Selection page, which enables a data entry user to select a
record to view
• Detail page, which enables a data entry user to view more
detailed information for the selected record
Activity groups may also contain additional related pages. For
example, your database might contain a table that stores the business
associates for each contact. You could create another page to separate
the associate’s information. In addition, each activity group can have
its own menu, called an activity group menu (see menus below).
What are Activity Group and Master Menus?
MRI for the Web uses menus and links to navigate through the
application. It uses the following four types of menus:
• Activity Group Menus – Appears at the top of some of the
pages in MRI for the Web, providing a user access to related
pages. They are also used as dropdown menus within
applications to enable navigation through the module
• Application Menu – Is always available in the top left corner
of the screen. It allows users to select which MRI application
they would like to use
Objectives
After completing this module, you will be able to understand MRI web
three-tier structure
Three-Tier Architecture
MRI web uses three-tier architecture. This is the overview of MRI web
three-tier structure:
Objectives
After completing this module, you will be able to understand the
components of MRI web user interface
Text box
A box in which to enter text or numbers.
Button
An equivalent to a push-button as found on mechanical or electronic
instruments.
Drop-down list
A list of items from which to select. The list normally only displays
items when a special button or indicator is clicked.
List box
A GUI widget that allows the user to select one or more items from a
list contained within a static, multiple line text box.
Check box
A box which indicates an "on" or "off" state via a check mark ☑ or a
cross ☒. Sometimes can appear in an intermediate state (shaded or
with a dash) to indicate mixed status of multiple objects.
Radio button
A button, similar to a check-box, except that only one item in a group
can be selected. Its name comes from the mechanical push-button
group on a car radio receiver. Selecting a new item from the group's
buttons also deselects the previously selected button.
Datagrid
A spreadsheet-like grid that allows numbers or text to be entered in
rows and columns.
The hidden fields are used to store session values of the interface page.
Objectives
After completing this module, you will be able to understand how
the data displayed on MRI user interface related to MRI database
Note:
• Data displayed in every field on the user interface was retrieved
from database
• Data entered into every field is going to be saved to database.
In order to create a web page, all the information in the fields selected
to the page must exist in database. Otherwise, system will not able to
retrieve the date. If you want to edit the data, make sure you enter
the correct data type, character or numeric.
Objectives
After completing this module, you will be able to:
Objectives
After completing this lesson, you will be able to:
1. Click New Activity Group on the File menu or click the New
button inside the Open Page/Group Dialog Box
Field Description
Group ID: Type a unique name for the Activity Group.
Name Name of the Activity Group
Application (Required) Choose the MRI application that this
Activity Group will be
Category This field is optional. It helps to categorize the Activity
Group
Comment Include any notes you want about the Activity Group
Create or Select whether you would like to create your first page
Copy from scratch or copy it from another Activity Group
Creating a Page
To Create a Page:
Field Description
Page ID: Type a unique name for the Page. The name only
needs to be unique within this Activity Group
Description Type a Description of the Page
Table Choose which table this Page will be referencing
Data from tables will Check if you are only planning to use a grid to
only be displayed in a display the information from the table
grid
Objectives
After completing this lesson, you will be able to:
Copying a Page
To Copy a Page:
1. Open up the Activity Group that you want the copied page to be
located in.
2. Click Copy Activity Group Page on the File menu
Objectives
After completing this lesson, you will be able to:
• Add Divs and Spaces to a Page in Web Design
• Create a page that will
Divs
Divs represent HTML division tags (<DIV>...</DIV>) that mark the
sections of a page. To format your page correctly for MRI for the Web,
at least one div object must surround all of the data objects on the
page. You can add additional divs to group similar items of
information.
Note: To format your page correctly for MRI for the Web, a div object must
surround all of the data objects on the page.
Spacers
Spacers are blank labels that are used to create white space on the
page. Objects in Web Design expand down and to the right until they
run into another object. Spacers in MRI Web Design are also used to
force objects to display correctly.
Note: The spacers in the image above are colored grey for better
visibility. Typically spacers are the same color as the background of
the page.
Objectives
After completing this module, you will be able to:
Objectives
After completing this lesson, you will be able to:
Each object in Web Design has a different set of properties but they
will all have the Appearance and Properties tabs. Some objects will
also have more tabs included in their properties. Some properties can
be changed within the Object Properties dialog box while clicking on
others will open up a window with more space and options.
The Appearance tab will have properties associated with how the
object will look when displayed on MRI for Web. Some of the most
utilized properties are:
• Caption: Allows you to set what text will be displayed on the
object
• Alignment: Set whether the text is aligned to the Center, Left,
or Right
• BackColor: Choose the background color of the object
The Properties tab contains settings that control how the object
behaves in MRI for Web. Properties has more options it also has more
unique options when different objects are selected. Some of the most
utilized options within Properties are:
• Query: Define a query that will run when on the field when the
page is loaded. Typically used to populate a form or grid
column
• Hide: Turn on if you do not want to display the object on the
page
• Link: Set what page opens when a button is clicked
Objectives
After completing this lesson, you will be able to:
• Add buttons to pages
• Add table fields to pages
• Add calculation fields to pages
• Add pictures to pages
• Add checkboxes to pages
• Add radio buttons to pages
• Add list boxes to pages
• Add lines to pages
Another property that can be set is Link. Link allows you to set a page
to open when the button is linked. Linking to pages will be discussed
later in this training guide.
The Table Fields dialog box enables you to add field objects to your
page. From the Table Fields dialog box, you can access a list of fields
from the—
• Table on which the page is based
• Primary tables to the table on which the page is based
• Table on which an object is based, such as a grid
• Primary tables to the table on which an object is based
By default, field objects appear as text fields. In general, you only
need to change how a field object appears if the associated table field
contains a static value set. If the associated table field contains a
dynamic value set, MRI automatically provides the lookup list function
to the field object.
Note: If you want the field to have the field description placed in a
label next to it, make sure that the Drag/Drop Field Description
checkbox is checked.
Other objects can be added to your page from the Web Design
Toolbar. They include:
• Graphics
• Labels
• Calculation Fields
• Checkboxes
• Radio Buttons
• Dropdown List
• List Box
• Lines
To add these objects to your page just click the appropriate button on
the Web Design Toolbar and draw the object on you page. The edit
the object properties within each object’s Property’s page.
Note: Adding nbsp;nbsp;:: inside a label will place spaces followed by two
colons infront of the text.
Objectives
After completing this lesson, you will be able to set the Tab Order of a
Page
2. To set a new tab order, click the Clear All button to clear the
numbers from all of the tab order boxes on your page
3. Then click on each box in the order that you would like to set
on your page
Objectives
After completing this module, you will be able to:
• Add a grid
• Add/Edit Field and Calculation Columns within a grid
• Use Command Buttons to add and delete grid rows
• Add a Dropdown List to a grid
• Add a Calculation Field to sum a grid column
Objectives
After completing this lesson, you will be able to:
• Create a grid
• Add a Field Column to a grid
• Add a Calculation Column to a grid
Grids
The process of adding a grid to a page involves two steps: creating the
grid area, which defines the table on which you want to base the grid,
and adding the columns. You can add—
• Table field columns, which represent fields in the table on
which your grid is based, or a table related to the table on
which your grid is based
• Calculated columns, which do not store data in fields in a
table
To add a grid object:
1. Click Add Grid from the Web Design Toolbar
2. Click and then drag diagonally across the area of the page
where you want to add the grid. The Select Grid’s Table
dialog box will then display
3. Choose the table that you would like to associate with your
grid.
4. Click Ok.
2. In the Object Fields list box, select the field you want to
add as a column in the grid, and then drag the field to a
space within the grid.
Note: If the sizing handles tool is enabled, deactivate it from the
toolbar
2. The Calculation Column is now the last column in your grid. You
can position it by dragging it into place
In the next lesson you will learn how to use buttons to perform Insert
and Delete functions on a grid
Objectives
After completing this lesson, you will be able to:
Objectives
After completing this lesson, you will be able to:
Dropdown lists are great for selecting from a small number of records.
Dropdown list do not require a trip back to the server to get the data
unlike lookup lists. Use dropdown lists when there are a small number
of records in the table. For example, do NOT use dropdown lists to
select records from the LEAS or NAME table. These tables can potential
have thousands of records
1. Select the desired column and open the column properties. Set
the following properties below
a. CntrlType: Combo Box
b. CBOSource: SELECT (variable you want in the list) FROM
(TABLE) ORDER BY (variable you want ordered by)
i. You can define a general list of the CBOSource
instead of using a SQL statement by using the
following syntax:
LIST: code1,codedesc1,code2,codedesc…
Hint: You can add a blank line into your SQL Statement by doing a
NULL UNION statement
UNION SELECT NULL, NULL FROM (TABLE) GROUP BY (list
variable) ORDER BY (order variable)
Objectives
After completing this lesson, you will be able to:
Setting the default value of a grid column saves time for the person
entering data and it also allows hidden columns to be populated with
data. A great example of hidden columns needing to be populated
would be the LEASID and BUILDID fields on a LEAS subtable.
Another reason to set a default value on a grid column is if you would
like that column to be autonumbered.
Objectives
After completing this lesson, you will be able to:
3. Now whenever you save the records in your grid this field will
be updated with the total amount.
Objectives
After completing this module, you will be able to:
There are many components of a selection page that you will need to
understand
(see below).
Search Button – Appears to the right of the search fields. This button
executes the search on the server and returns the results into the grid.
Hyperlink Column – Is usually the first column in the selection grid.
This column contains the hyperlink that navigates a user to the detail
page. In our example, the hyperlink will navigate the user to the Lease
Details page
Hidden fields:
Start Search Field – Is a hidden calculation field object that contains
a value that determines whether or not the system returns records in
the grid.
4. Add a calculation field above each of the grid columns you want
the users to have the ability to search.
5. In the field for the VariableName property of each calculation
field, assign a variable name that describes the search field.
6. Resize the Search Fields and grid columns so the widths of the
columns are almost the same width as the search fields. The
widths of the search fields need to be slightly smaller than the
grid columns (see below).
IF{[SRCH_REPORTDATE]<>NULL,AND EXPENSE.REPORTDATE
='[SRCH_REPORTDATE]',}
IF{[SRCH_DESCRIPTION]<>NULL,AND EXPENSE.DESCRIPTION
LIKE '%[SRCH_DESCRIPTION]%',}
The remaining IF{} functions each state that if the search field is not
equal to null, then append an AND condition to the WHERE clause that
filters the records by the value in the search field; otherwise, do not
append anything to the WHERE clause. Therefore, if a user types X in
the Project ID search field, the system applies the following SQL
statement to load data into the grid:
Note: You will need to do this for all of your search fields
5. Click OK.
6. Click Save.
Objectives
After completing this module, you will be able to:
Objectives
After completing this lesson, you will be able to:
• Create a button to link to other pages
2. Double click the Link property and open the Page Links page
4. Click OK.
5. Click OK.
6. Click Save.
The completed Link page in MRI web
Objectives
After completing this lesson, you will be able to:
• Create a new frame
• Add tabs to a frame
• Edit an existing frame
2. Double click the Frame property and open the Define Frame
Attributes page
3. Set up the Frame attributes:
a. Set up Tabs
i. On the Tabs tab, click the Insert Tab button
ii. Enter Tab ID, Tab Text, and Link
b. To modify the frame color, open the Frame tab and choose
a color
e. Click OK
f. Save changes
Objectives
After completing this module, you will be able to:
Objectives
After completing this lesson, you will be able to:
• Create an Activity Group Menu
When you create a new activity group menu, you define the default
menu structure. The system applies the default menu structure in MRI
for the Web for all roles unless a role-specific menu is defined for the
user’s role. Additionally, the default menu structure is a template for
the role-specific menus you create for the activity group
You must define the default menu structure before you can create a
role-specific menu.
To create an activity group menu:
1. On the File menu, click Customize Menus to display the
Select Existing Menu dialog box.
2. Click New from the Select Existing Menu dialog box.
4. Right click on the newly created menu item. You can now select
to either Insert New Child Item, Insert New Item Below,
Insert New Item Above, or to Insert Separator Below. Use
these commands to build out the link structure of your Activity
Group Menu
Field Action
Group Select the Activity Group where the page you want to
link to is located
Page Select the destination Page
Choose Page Displays a page if the following javascript expression
Checkbox does not evaluate to zero.
URL Enter the URL for the outside webpage
Field Action
Display Page Check if you would like the page to open in a new
Checkbox window
Hide Menu Choice Hides the menu choice on the pages about that page
Checkbox
Force a new record Select if you want the menu item to open the
Checkbox destination page for data entry
3. Once you have opened the menu, you can add menu items in
the same way described in the previous section.
4. To edit a menu item, right click the menu item and click
Customize. You will not be able to edit the menu item
Objectives
After completing this lesson, you will be able to:
3. You can now edit the applications that appear in the Application
Dropdown Menu that shows at the top of every screen in MRI
for Web
3. You can now edit the options that appear in the Setup and Help
Menus that show in the top left of every screen in MRI for Web
3. You can now edit the options that appear in the Setup and
Maintenance Menu
Objectives
After completing this lesson, you will be able to set up custom report
options.
7. Click the Calculation icon and draw the object on the page.
Add the DIV and spacers to the page.
8. Select Options > Select Current Object Style > NEWWEB
(or WEBRPTS)
9. Highlight all objects on the page and click Apply Style from the
properties dialog box.
10. Right-click on the object and select Display Properties.
11. When the Form Properties dialog box for the form appears,
click the Properties tab.
12. Select Yes for the value of the ReportOption property value
Objectives
After completing this lesson, you will be able to make reports available
to Web users through MRI.
Procedure
Complete the following steps to make a report available to Web users:
1. Select File > Web Reports to display the Web Reports dialog
box.
2. On the left side of the dialog box, select the All Reports folder.
The reports in the folder appear on the right side of the dialog
box.
3. Select the checkbox next to the EXPENSERPT report ID to
make the report available in MRI for the Web.
5. Select the activity group that has the custom web report option,
and click OK.
Objectives
After completing this lesson, you will be able to Web-enable a report
.
Web-enabling a Report
Procedure
Complete the following steps to Web-enable a report:
7. Select File > Open Activity Group to open the copied activity
group.
8. Navigate through the folder tree to the page that you need,
select the page, and click Open.
The page opens.
9. Right-click on the page, and select Display Properties
11. Click Apply a Style to format the style of the report options as
a Web report
12. Select the WEBRPTS Style ID for the background and the text
boxes, click Select.
13. Once the report options are all set up, select File > Web
Reports to Web-enable the report you want.
17. In the Page field, select the page in the group to use, and click
OK.