0% found this document useful (0 votes)
38 views

Web Design

Uploaded by

printableboon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
38 views

Web Design

Uploaded by

printableboon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 122

MRI Web Design

Operational Training Guide

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

Web Design Training Guide i


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus................................................................87
Lesson 1: Creating Activity Group Menus ....................................................................... 88
Lesson 2: Editing Application Menus ............................................................................. 95
Module 9: Web Enabling a Report ............................................................................99
Lesson 1: Setting up Custom Report Options in Web Design .......................................... 100
Lesson 2: Making Reports Available through MRI Web Interface ..................................... 104
Lesson 3: Web Enabling a Report ............................................................................... 107
Appendix 1: Expense Report Example ....................................................................115

ii Web Design Training Guide


© 2011 MRI Software, LLC
Course Overview

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.

This course uses lecture, demonstration and hands-on exercises to


teach the concepts and tasks to perform when using the MRI Web
Design application.

What is Web Design?

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

What Will You Learn?


In this training, you will learn the following main objectives:
 Understand the Web Design and MRI for Web Interfaces and
how they interact
 Understand the MRI Table Structure
 How to create Activity Groups and Pages and link them
together
 Understand the Menu Structure of MRI for Web
 Understand how to Web Enable a Report

Web Design Training Guide I


© 2011 MRI Software, LLC
Course Overview

Who Should Attend?

The ideal participants for this training include:

IT personnel Project Managers

Course Outline
A typical training day goes from 9:00 a.m. – 5:30 p.m. with the
following breaks:

1st break: 10:30 a.m. – 10:45 a.m.

Lunch 12:00 p.m. – 1:00 p.m.

2nd break 2:30 p.m. – 2:45 p.m.

Below is the course outline broken down by modules and lessons:

Web Design Training


Module 1: Database Schema Lesson 1: Understanding the MRI
Overview System Table Structure
Lesson 2: Understanding the CM and RM
Table Structure

Lesson 3: Understanding the GL Table


Structure

Module 2: Getting Started in Lesson 1: User Interface


Web Design
Lesson 2: Components of MRI for Web
Interface
Lesson 3: MRI Web Structure
Lesson 4: User Interface Components
Lesson 5: MRI User Interface and
Database
Module 3: Creating a Report Lesson 1: Creating Activity Groups and
Pages
Lesson 2: Copying Activity Groups and
Pages
Lesson 3: Divs and Spacers
Lesson 4: Adding Secondary Segments
Lesson 5: Adding Total Breaks

II Web Design Training Guide


© 2011 MRI Software, LLC
Course Overview

Module 4: Objects in Web Lesson 1: Object Properties


Design
Lesson 2: Adding Objects to Pages
Lesson 3: Setting Tab Order on a Page
Module 5: Grid Objects in Lesson 1: Creating a Grid
Web Design
Lesson 2: Adding Command Buttons to
Insert and Delete Grid Rows

Lesson 3: Adding a Dropdown List to a


Grid Column
Lesson 4: Setting Default Values in a
Grid
Lesson 5: Adding a Calculation Field to
sum a Grid Column

Module 6: Creating a Lesson 1: Creating a Selection/Lookup


Selection/Lookup Page Page

Lesson 2: Setting Up Search Fields


Lesson 3: Setting Up the Grid to Use
Search Fields

Lesson 4: Setting Up the Search Button

Lesson 5: Setting Up the Hyperlink

Module 7: Linking Pages in Lesson 1: Creating Links to Pages


MRI Web
Lesson 2: Creating a Frame

Module 8: Setting Up MRI for Lesson 1: Creating Activity Group Menus


Web Menus
Lesson 2: Editing the Master Menus
Module 9: Web Enabling a Lesson 1: Setting up Custom Report
Report Options in Web Design

Lesson 2: Making Reports Available


through MRI Web Interface
Lesson 3: Web Enabling a Report

Web Design Training Guide III


© 2011 MRI Software, LLC
Course Overview

IV Web Design Training Guide


© 2011 MRI Software, LLC
Module 1: Database Schema Overview
Purpose
The purpose of this module is to provide you with an understanding of
the MRI database schema.

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

Web Design Training Guide 1


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

2 Web Design Training Guide


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Lesson 1: Understanding the MRI System 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

Web Design Training Guide 3


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Composition of Tables in MRI


Overview
MRI uses the following tables to keep track of tables, fields, and
relationships within the database. During table modifications in Table
Design or during an upgrade, these tables are maintained as
modifications are made to the table. Conversely, any changes made
to MRI tables outside of MRI may result in limited functionality and/or
loss of the fields during an upgrade.

Table Description
MRITABLE All tables in the database

MRIFIELD All fields in all tables


MRIINDEX Indexes, primary keys for each table

MRIRELN Foreign key relationships between tables

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.

List all non-MRI (custom) tables:


SELECT * FROM MRITABLE WHERE MRITABLE=’N’

Find tables containing “amenities” in the description:


SELECT * FROM MRITABLE WHERE DESCRPN LIKE ‘%AMENITIES%’

MRIFIELD
MRIFIELD lists every field in every table in the database, along with
information about the field type, length, etc.

Find all the required fields in the BLDG table:


SELECT * FROM MRIFIELD WHERE TABLENAME=’BLDG’ AND
REQUIRED=’Y’

Show all fields in the ‘JOURNAL’ table with field lookups:


SELECT * FROM MRIFIELD WHERE TABLENAME=’JOURNAL’ AND
LOOKUP IS NOT NULL

Show all fields in the database that store account numbers:


SELECT * FROM MRIFIELD WHERE SYSFIELD=’ACCTNUM’

4 Web Design Training Guide


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Finding the Primary Key of a Table


Overview
A Database Index acts just like the index in the back of a book,
instead of searching every page for the information we are looking for,
we search the index and it points us to the right location.

MRIINDEX
MRIINDEX lists every index, including primary keys, on every table in
the database.

Find the primary key fields for table RMLEASE:


SELECT * FROM MRIINDEX WHERE TABLENAME=’RMLEASE’

Web Design Training Guide 5


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Understanding the Foreign Key Relationships of a


Table
Overview
MRIRELN is used by MRI to determine join relationships, lookup lists,
and a variety of other functionality. It’s also very useful for
determining entity relationships when you’re writing queries or trying
to find out about the database schema.

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’

What fields elsewhere in the database reference the BLDG table?


SELECT * FROM MRIRELN WHERE PRIMARYTBL=’BLDG’

6 Web Design Training Guide


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Lesson 2: Understanding the CM and RM Table


Structure

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

Web Design Training Guide 7


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Understanding the Basic CM Table Structure


Overview
The tables listed below are the most important in the Commercial
Management module.

Table Description
BLDG Building table

CMPD Current CM period for each building


SUIT Suite table

MOCCP Master Occupants

LEAS Lease table

CMRECC Recurring charges

INCH/SECINCH Income categories

GLMT/SECGLMT CM/GL master interface chart

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.

8 Web Design Training Guide


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

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.

Web Design Training Guide 9


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Identifying the Relationships between the Main CM


Tables
Overview
The following diagram shows the relationships of the main CM tables.

10 Web Design Training Guide


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Understanding the Basic RM Table Structure


Overview
The following tables are the most important in the Residential
Management module.

Table Description
RMPROP RM Property table

RMPD RM Current period table


RMBLDG RM Building table
CLSS Unit class table
UNIT Unit table

RMLEASE RM lease table

RMRECC Recurring charges

NAME Residents, applicants, and prospects

PROSPECT Prospect table

CHGCODE/SECCODE Charge code table

RMGLMT/RMSECGLMT RM Master interface chart

SCHD Scheduler 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.

Web Design Training Guide 11


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

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.

12 Web Design Training Guide


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Identifying the Relationships between the Main RM


Tables
Overview
The following diagram shows the relationships of the main RM tables.

Web Design Training Guide 13


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Lesson 3: Understanding the GL Table Structure

Purpose
The purpose of this lesson is to provide you with a general
understanding of GL Table Structure.

Objectives

After completing this lesson, you will be able to:


• Understand the basic GL table structure
• Identify relationships between the main GL tables

14 Web Design Training Guide


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Understanding the Basic GL Table Structure


Overview
The following tables are the most important in the General Ledger
module.

Table Description
GLCD Chart of accounts header table

GACC Chart of accounts


JOURNAL Current and future period detail transactions

GHIS Historical detail transactions

GLSUM Summary account balances

ENTITY Financial property table

PERIOD GL calendar

BMAP Defines the relationship between entities, banks,


and cash accounts in your chart.

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).

Web Design Training Guide 15


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

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.

16 Web Design Training Guide


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design
Purpose
The purpose of this module is to provide you with an understanding of
the Web Design user interface as well as the

Objectives
After completing this module, you will be able to:

• Navigate and explain the Web Design user interface

• Understand the different components of the MRI for Web


interface

• Understand how Web Design interacts with your MRI database

Web Design Training Guide 17


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

Lesson 1: User Interface


Purpose
The purpose of this module is to introduce you to the MRI Web Design
user interface and the tools used to create view for MRI for Web

Objectives
After completing this lesson, you will be able to:

• Navigate within the Web Design interface


• Identify and use the Menu Items and Toolbar Icons used in
Web Design

18 Web Design Training Guide


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

Understanding the Web Design User Interface

Overview
When you first enter Web Design, a unique tool bar offers several
shortcut buttons and icons you can click to perform different functions.

Additionally, the menu bar allows you to manager your report


definitions, report options, and somewhat control the look and feel of
the interface.

Tool Bar

Menu Bar with Expanded Menus

Web Design Training Guide 19


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

Lesson 2: Components of MRI for Web


Interface
Purpose
The purpose of this module is to familiarize you with the components
of MRI for Web.

Objectives
After completing this lesson, you will be able to:
• Identify and use the Menu Items and Toolbar Icons used in
Web Design

20 Web Design Training Guide


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

Understanding the MRI for the Web Interface

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

Web Design Training Guide 21


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

• Setup and Maintenance Menu – Can be accessed by clicking


Setup and Maintenance on the Setup Dropdown Menu in the
top right of the MRI for Web Screen. Module Options can be set
and changed from inside this menu.
• Global Navigation Menu – Controls the Setup and Help
Dropdown Menus in the top right of the MRI for Web interface.

22 Web Design Training Guide


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

Lesson 3: MRI Web structure


Purpose
The purpose of this module is to show you the basic structure of MRI
website

Objectives
After completing this module, you will be able to understand MRI web
three-tier structure

Web Design Training Guide 23


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

Three-Tier Architecture

There-tier architecture is a software engineering term, also refers to as


client-server architecture, which means the presentation (user
interface), the application processing (logic), and the data
management (database) are logically separate processes. The
advantage of the three-tier architecture is intended to allow any of the
three tiers to be upgraded or replaced independently as requirements
or technology change. For example, a change of the web user interface
would only affect the web design.

MRI web uses three-tier architecture. This is the overview of MRI web
three-tier structure:

24 Web Design Training Guide


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

Lesson 4: MRI User Interface Components


Purpose
The purpose of this module is to show you the components of MRI web
user interface

Objectives
After completing this module, you will be able to understand the
components of MRI web user interface

Web Design Training Guide 25


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

MRI Web User Interface Components

The comment components are:

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.

26 Web Design Training Guide


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

The user interface components under browser view:

Web Design Training Guide 27


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

The user interface components under web design view:

The hidden fields are used to store session values of the interface page.

28 Web Design Training Guide


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

Lesson 5: MRI User Interface and


Database
Purpose
The purpose of this module is to show you the relationship between
user interface and database

Objectives
After completing this module, you will be able to understand how
the data displayed on MRI user interface related to MRI database

Web Design Training Guide 29


© 2011 MRI Software, LLC
Module 2: Getting Started in Web Design

MRI User Interface and 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.

30 Web Design Training Guide


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages
Purpose
The purpose of this module is to instruct you on how to create and
copy Activity Groups and Pages. It will also show you how to setup
your pages so they will display correctly within the MRI for Web
Interface

Objectives
After completing this module, you will be able to:

• Create and Copy Activity Groups


• Create and Copy Pages
• Use Divs and Spacers to ensure that your pages display with
the desired layout

Web Design Training Guide 31


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

Lesson 1: Creating Activity Groups and


Pages
Purpose
The purpose of this lesson is to instruct you how to create Activity
Groups and Pages within Web Design

Objectives
After completing this lesson, you will be able to:

• Create an Activity Group


• Create a Page within an Activity Group

32 Web Design Training Guide


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

Creating an Activity Group

To create an Activity Group:

1. Click New Activity Group on the File menu or click the New
button inside the Open Page/Group Dialog Box

The New Activity Dialog Box will open

2. Fill in the necessary information. The table below describes the


content of each field

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

3. Once these fields have been entered, click OK.

Web Design Training Guide 33


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

Creating a Page
To Create a Page:

1. Click the New Page icon in the toolbar

2. Fill in the necessary information. The table below describes the


content of each field

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

3. Once these fields have been entered, click OK.

34 Web Design Training Guide


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

Lesson 2: Copying Activity Groups and


Pages
Purpose
The purpose of this lesson is to instruct you how to copy Activity
Groups and Pages within Web Design

Objectives
After completing this lesson, you will be able to:

• Copy an Activity Group


• Copy a Page within an Activity Group

Web Design Training Guide 35


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

Copying an Activity Group

To create an Activity Group:

1. Click Copy Activity Group/Menu on the File menu

2. Select the Activity Group that you would like to copy


3. Select the database where the copy will be placed
4. The Application should default to be the same as the Activity
Group being copied
5. Provide a Description, select a category and choose a New
Activity Group ID.
6. Once these fields have been entered, click OK.
Note: You can also use this screen to copy Menus or ViewDesign
Views.

36 Web Design Training Guide


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

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

3. Choose the Page you would like copied


4. Click OK.
5. The copy of the page will now be the last page in the open
activity group
Note: You can also use this screen to copy MRI Windows views when
“Web Enabling” a custom feature or report

Web Design Training Guide 37


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

Lesson 3: Divs and Spacers


Purpose
The purpose of this lesson is to show users the necessity of Divs and
Spacers and to instruct them on how to use them.

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

38 Web Design Training Guide


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

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.

To add a div to a page:

1. Click Add Div from the toolbar


2. Click and then drag diagonally across the area of the page
where you want to add the div

Note: To format your page correctly for MRI for the Web, a div object must
surround all of the data objects on the page.

Web Design Training Guide 39


© 2011 MRI Software, LLC
Module 3: Activity Groups and Pages

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.

To add spacers to a page:

1. Click Add Label from the toolbar


2. Click and then drag diagonally across the area of the page
where you want to add the label
3. Open the Label Properties dialog box. To open the properties
dialog box, hover your mouse above the object, right click, and
then select Display Properties.
4. Click the Appearance tab, and then for each Property field
listed below, enter the value for each one.

40 Web Design Training Guide


© 2011 MRI Software, LLC
Module 4: Objects in Web Design
Purpose
The purpose of this module is to introduce you to the different types of
objects in MRI Web Design.

Objectives
After completing this module, you will be able to:

• Find and change object properties


• Know how to add objects to pages in MRI Web design
• Know how to set the tab order on a page

Web Design Training Guide 41


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

Lesson 1: Object Properties


Purpose
The purpose of this lesson is to introduce you to Object Properties

Objectives
After completing this lesson, you will be able to:

• Find and change the properties of objects in MRI Web Design


• Understand how Object Properties affect MRI for Web

42 Web Design Training Guide


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

Finding Object Properties in MRI for Web


Every object in Web Design has properties. These can be found by
right clicking the object and selecting Display Properties

The Object Properties dialog box will then open

Web Design Training Guide 43


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

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

44 Web Design Training Guide


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

Lesson 2: Adding Objects to Pages


Purpose
The purpose of this lesson is to show you how to add various objects
to pages in Web Design

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

Web Design Training Guide 45


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

Adding Buttons to a Page

Command buttons enable data entry users to initiate special actions or


functions. Some of the ways you can use command buttons include:–
• Opening pages
• Executing commands
• Running reports
Note: Buttons are used in MRI for the Web to create new records,
save records, cancel changes, and delete records. There is not a
standard toolbar, like windows, that provides this functionality. These
commands need to be created for each page.

To add a Command Button to a page:


1. Click Add Command Button from the toolbar
2. Click and then drag diagonally across the area of the page
where you want to add the command button.

3. Open the Command Button Properties


4. Within the Appearance tab you can set the text that will display
on the button and its background color
5. On the Properties tab you can define what event will occur
when the button is clicked. A few of the most used commands
are listed in the table below
Property Value Function
CMD CLNTCMD{NEW} Clicking the button will create a new
record in the table
CMD CLNTCMD{SAVE} Clicking the button will save the table
CMD CLNTCMD{DELETE} Clicking the button will delete the
current record in the table
CMD CLNTCMD{CANCEL} Clicking the button will cancel any
changes since the table was last
saved

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.

46 Web Design Training Guide


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

Adding Table Fields to a Page

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.

To add a table field to a page:


1. Open the Table Fields dialog box by clicking on the Display
Field Information

Web Design Training Guide 47


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

2. Drag and drop the field onto your page

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.

Adding Other Objects to Pages

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.

48 Web Design Training Guide


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

Lesson 3: Setting Tab Order on a Page


Purpose
The purpose of this lesson is to show you how to set the Tab Order on
a Page in MRI Web Design

Objectives
After completing this lesson, you will be able to set the Tab Order of a
Page

Web Design Training Guide 49


© 2011 MRI Software, LLC
Module 4: Objects in Web Design

Setting Tab Order on a Page


To Set the Tab Order on a Page:
1. Click the Set Tab Order button from the Web Design
Toolbar. The Tab Control dialog box will appear next to your
page. You can now see the current tab order of your 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

4. Congrats! You have now set your Tab Order

50 Web Design Training Guide


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design
Purpose
The purpose of this module is to introduce you to Grid objects in MRI
Web Design. It will show you how to add a grid and how to add
columns to that grid

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

Web Design Training Guide 51


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Lesson 1: Creating a Grid


Purpose
The purpose of this lesson is to show you how to create a grid. This
includes setting the base table for the grid and adding Field and
Calculation Columns

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

52 Web Design Training Guide


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Grids

Grids display multiple records on a single page and are composed of


the following two elements:
• Rows - Represent each record. For example, a grid based on
the Expense Detail (EXPENSEDET) would contain a row for each
expense detail record.
• Columns - Represent each field in the table. For example, a
grid based on EXPENSEDET table would contain a column for
each field, such as Expense ID, Expense Date, and Expense
Amount.
You can use grids for a variety of purposes, such as displaying:
• All of the records in a table (selection or lookup page)
• Records from one table that relate to records in another table
(master/detail page)
• Calculated values (ViewPoint has examples)

Adding a Grid Object

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

Web Design Training Guide 53


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

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.

54 Web Design Training Guide


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Adding a Table Field Object to a Grid

To add table field columns:


1. Open the Table Fields dialog box, and then in the Selected
Object field, select GRID [Table Name] to display the fields
for the table on which you based the grid

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

Web Design Training Guide 55


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Adding a Calculation Column to a Grid

Calculation columns are used to calculate expressions in a grid object.


You can embed any MRI standard expression within a column to do
easy or complicated logic. Calculation columns are also used to select
records in the grid for deletion

To add a calculation column for record selection:


1. Open the Grid Properties dialog box, and then click the
Column tab to enable the Add Cal Col button. Click Add Calc
Col to add the column.

2. The Calculation Column is now the last column in your grid. You
can position it by dragging it into place

3. Use the Calculation Column’s properties to perform operations


on the grid.

In the next lesson you will learn how to use buttons to perform Insert
and Delete functions on a grid

56 Web Design Training Guide


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Lesson 2: Adding Command Buttons to


Insert and Delete Grid Rows
Purpose
The purpose of this lesson is to show you how to use Command
Buttons to Insert and Delete grid rows

Objectives
After completing this lesson, you will be able to:

• Program a Command Button to Insert or Delete a grid row


• Create a calculation column to indicate which row will be
deleted

Web Design Training Guide 57


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Add Command Buttons to Insert and Delete Grid Rows

To add commands to insert and delete grid rows:


1. Add two new command buttons above the grid. The first
command button will be named New, and the second one will
be named delete.

2. Use the table below to edit the command button properties

Object Property Property Description Property Value Expression


Name Description
New Text Type the text you want to New N/A
appear on the button
New CMD Defines an expression the CLNTCMD{INSERTRO Adds a blank
system executes to the client row to the
when the user clicks the W, GRIDID} grid.
object
New Title Defines the text that appears Click here to add a N/A
when a user moves the mouse new row
over the object.
Delete Text Type the text you want to Delete
appear on the button.
Delete CMD Defines an expression the CLNTCMD{DELETERO Deletes
system executes to the client W, GRIDID} record(s)
when the user clicks the from the
object table.
Delete Title Defines the text that appears Click here to delete a N/A
when a user moves the mouse the selected rows
over the object.

3. Add a calculation column to the grid. Set the following


properties below
a. CntrlType: Checkbox
i. Defines the type of object that appears on the
page in data entry mode.
b. VariableName: GRIDID_CHK
i. To define the column as the delete selection
column, the VariableName must be in the form of
GRIDID_CHK

58 Web Design Training Guide


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Lesson 3: Adding a Dropdown List to a


Grid Column
Purpose
The purpose of this lesson is to show you how to add a dropdown list
to a grid column

Objectives
After completing this lesson, you will be able to:

• Add a dropdown list to a grid column


• Add a blank line into the dropdown list

Web Design Training Guide 59


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Add a Dropdown List to a Grid Column

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

To add a dropdown list to a grid column:

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)

60 Web Design Training Guide


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Lesson 4: Setting Default Values in a Grid


Purpose
The purpose of this lesson is to show you how to set the default values
of a grid. It will also show you how to have that default be an
automatic sequence

Objectives
After completing this lesson, you will be able to:

• Set the default value of a grid column


• Set the default value to be part of an autonumber sequence

Web Design Training Guide 61


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Setting the Default Value for a Grid

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.

Follow the steps to set a default value for a grid column:


1. Select the desired column and open the column properties. The
following properties below are options that you have to set as
defaults
a. Default: [VARIABLE] (This is where you would use
BLDGID, LEASID, PROPID, or other variables that are
IDs and are typically part of Primary Keys)
b. DefaultPrevFld: Yes/No (Defaults the field to be the
same as the one above it. Is useful when entering
repetitive data)
Follow the steps to set an autonumber default value for a grid column:
2. Click the Properties tab on the grid object
3. In the AutoNumFld and SequenceID properties, enter in the
variable name for the column that you have autonumbered.
Make sure that both are set to the same value

62 Web Design Training Guide


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Lesson 5: Adding a Calculation Field to


Sum a Grid Column
Purpose
The purpose of this lesson is to show you how to create a calculation
column that will sum a grid column

Objectives
After completing this lesson, you will be able to:

• Create a calculation column on a page that will sum a grid


column

Web Design Training Guide 63


© 2011 MRI Software, LLC
Module 5: Grid Objects in Web Design

Add a Calculation Field to Sum a Grid Column

Follow the steps to create a calculation field to sum a grid column:


1. Click on the Add Calculation Field button on the Web Design
Toolbar and then drag the field into position on your page
2. Open the properties of your new calculation field. Set the
following properties listed in the table below.
Object Property Description Value
Name
Total VariableName Name of your calculation field TOTAL
Total Expression Defines an expression the GRIDSUM(GRIDI
system executes to the server D,
whenever the page loads, such VARIABLENAME}
as when a record is saved.
Total AllowEdit Sets whether or not a user can No
enter or modify a value in the
field.
Total FieldType Sets the type of data the field Numeric
will display
Total Alignment Aligns the text in the object Right

3. Now whenever you save the records in your grid this field will
be updated with the total amount.

64 Web Design Training Guide


© 2011 MRI Software, LLC
Module 6: Creating a Selection/Lookup
Pages
Purpose
This section describes how to create selection pages and search fields.
The selection pages are necessary for users to lookup specific records
in the database. Selection pages replace the standard F7/F2
functionality in windows. There is generally at least one selection page
in an activity group.

Objectives
After completing this module, you will be able to:

• Create selection and lookup pages in MRI Web Design

Web Design Training Guide 65


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

Lesson 1: Creating a Selection/Lookup


Page
Overview

There are many components of a selection page that you will need to
understand
(see below).

Non hidden fields:


Search Fields – Appear above the grid on selection pages in MRI for
the Web, enabling a user to look up specific records by the data in a
column.

66 Web Design Training Guide


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

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.

Setting up the selection grid contains hyperlink column:


1. Create the selection page for the table which you want to
search
2. Add the DIV, spacers, and label for the page (see creating a
page above).
3. Add a grid object within the DIV and select the table you want
to search.
4. Add the fields to the grid that you would like to be searchable

Web Design Training Guide 67


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

Lesson 2: Setting up the Search Fields


Follow the steps to set up a search field
1. Add a calculation field for the start search field.
Note: Since the start search field (STARTSRCH) is hidden from users
in MRI for the Web, you can place the STARTSRCH anywhere on the
page.
2. Open the Calculation Field Properties dialog box.
3. Click Properties, and then use the information in image below
to define the properties for the calculation field.

68 Web Design Training Guide


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

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).

Web Design Training Guide 69


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

Lesson 3: Setting up the Grid to Use


Search Fields
Follow the steps to setup the grid to search fields:

1. Open the Grid Properties dialog box.


2. Click Properties, and then in the field for the GridId property,
type a name that uniquely identifies the grid or accept the
default.
3. In the field for the Query property, enter an expression in the
format of an SQL WHERE clause that defines the result to
return in the grid based on the values in the search fields and
STARTSRCH.
Note: Use IF{} functions to complete this property because
STARTSRCH can contain either Y or N and the search fields may or
may not contain values
To define the records to return in the grid on your selection page,
begin by entering the following expression:
IF{[STARTSRCH]=N,1=2,1=1}

This IF{} function states that if the value in STARTSRCH is equal to Y,


then append ‘1=2’ to the WHERE clause for the grid; otherwise,
append ‘1=1.’ 1=1 is SQL syntax you can use in a WHERE clause to
return all of the records in a table. 1=2 is SQL syntax you can use in a
WHERE clause if you do not want the system to return any records.
The following expressions are from the Expense Report Example.
EXPENSE.EMPLOYEEID LIKE '[SRCH_EMPLOYEEID]%',}

IF{[SRCH_REPORTDATE]<>NULL,AND EXPENSE.REPORTDATE
='[SRCH_REPORTDATE]',}

IF{[SRCH_DESCRIPTION]<>NULL,AND EXPENSE.DESCRIPTION
LIKE '%[SRCH_DESCRIPTION]%',}

IF{[SRCH_PROJID]<>NULL, AND EXPENSE.PROJID LIKE


‘[SRCH_PROJID]%',} IF{[SRCH_CASHADV]<>NULL, AND
EXPENSE.CASHADV >=[SRCH_CASHADV],}

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:

70 Web Design Training Guide


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

SELECT * FROM Expense WHERE 1=1 AND EXPENSE.PROJID


LIKE ‘X%’
4. In the field for the FinalLoadTrigger property, type the following
expression to set the Search Fields to null and set the
STARTSRCH field to N each time the grid finishes loading on
the page
SETFLD{STARTSRCH,N} – Sets Start Search Field to N
SETFLD{Name of Field,} – Sets your search field equal to Null

Note: You will need to do this for all of your search fields

Web Design Training Guide 71


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

Lesson 4: Setting up the Search Button


Follow the steps to setup the search button
1. Add a command button to the search page, then open the
Command Button Properties dialog box.
2. Click Appearance tab, and then in the field Text, type Search.
3. Click Properties tab, and then in the field SERVERCMD, enter
the following expression:
CLNTCMD{RECALC,LOADGRID{EXPENSE,F}}
Note: The SERVERCMD expression details an expression to be
executed on the server. If a value is entered here, any expression
entered into the CMD field will be ignored
4. On the File menu, click Save to save the page.

72 Web Design Training Guide


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

Lesson 5: Setting up the Hyperlink


Follow the steps to setup a hyperlink that will open up the chosen record from
the search screen.
1. Select the grid column that you would like to place the link in
and open the properties dialog box.
2. Double click on the Link property in the Column Tab. This will
open up the Page Links dialog box
3. In the Action area on the Page Links dialog box, click the Link
to MRI Page option button to display the applicable fields and
then define the fields in the following table:
Field Action
Group Select the Activity Group where the page you want to link to is located
Page Select the destination page from the previously selected activity group
Menu Select the Activity Group Menu that you want to appear on the
destination page

Web Design Training Guide 73


© 2011 MRI Software, LLC
Module 6: Creating Selection/Lookup Pages

4. To define any of the advanced actions for the link, click


Advanced to display the Advanced Link Options dialog box

5. Click OK.
6. Click Save.

Congratulations! You have completed setting up a Selection and


Lookup page!

74 Web Design Training Guide


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web
Purpose
The purpose of this module is to show you how to link pages modify
page links, and how to create a frame page in MRI Web Design

Objectives
After completing this module, you will be able to:

• Create a button to link to other pages


• Create a hyperlink to link to other pages
• Modify page links
• Create a frame page and add tabs to existing frame pages

Web Design Training Guide 75


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

Lesson 1: Creating Links to Pages


Purpose
The purpose of this lesson is to show you how to link pages in MRI web
through button or hyperlink

Objectives
After completing this lesson, you will be able to:
• Create a button to link to other pages

• Create a hyperlink to link to other pages

76 Web Design Training Guide


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

Add Button to link to other page

To add a button to a page:


1. Add a button to the page at the desired location. Set the Text
property to &New.

2. Double click the Link property and open the Page Links page

Web Design Training Guide 77


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

3. Set up the page by input the following information:


a) Object to Link: this is the name of the button. This field is
not editable.
b) Action filed: this field specify the behavior of the button.
c) Link to an MRI Page: if you want the new button link to an
existing MRI page, select this option
d) Group: the activity group which the page belongs to.
e) The page: select the page that you want the button links to
f) Display page in a new browser window: do you want the
page to be a pop up window
4. Click OK.
5. Click OK.
6. Click Save.

78 Web Design Training Guide


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

Add Hyperlink to link to other page

1. Add a label to a page, and set the Caption property to Link


To Other Page.

2. In the Properties tab, click the Link property to display the


Page Links page.
3. Use the information in previous session to define the link

Web Design Training Guide 79


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

4. Click OK.
5. Click OK.
6. Click Save.
The completed Link page in MRI web

80 Web Design Training Guide


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

Lesson 2: Creating a Frame


Purpose
The purpose of this lesson is to show you how to add a frame to a
page in MRI Web Design.

Objectives
After completing this lesson, you will be able to:
• Create a new frame
• Add tabs to a frame
• Edit an existing frame

Web Design Training Guide 81


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

Create a frame and add tabs to the frame


To create a frame
1. Add a Graphic to the page. Open the Properties tab and set
the ImageType to 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

82 Web Design Training Guide


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

b. To modify the frame color, open the Frame tab and choose
a color

Web Design Training Guide 83


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

c. Open the Categories tab and click Insert Category

84 Web Design Training Guide


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

d. If the tab is grouped by categories, move back to Tabs tab to


select the category for the tab

e. Click OK
f. Save changes

The web page view

Web Design Training Guide 85


© 2011 MRI Software, LLC
Module 7: Linking Pages in MRI Web

86 Web Design Training Guide


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus
Purpose
The purpose of this module is to introduce you to menus in MRI Web
Design

Objectives
After completing this module, you will be able to:

• Create a new Activity Group menu


• Create a new menu item
• Define actions for Web Menus
• Edit the Master Menu

Web Design Training Guide 87


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

Lesson 1: Creating Activity Group Menus


Purpose
The purpose of this lesson is to show you how to create Activity Group
Menus in Web Design

Objectives
After completing this lesson, you will be able to:
• Create an Activity Group Menu

• Create a new Menu Item


• Define Actions for Menu Items

• Edit Activity Group Menus

88 Web Design Training Guide


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

Creating Activity Group Menus

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.

3. In the left frame, click next to the application folder that


contains the activity group for which you want to create a menu
(see below) and click Select.

Web Design Training Guide 89


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

Creating New Menu Items


To add a new menu item
1. Right click on an existing menu item near where you want to
add the new menu item.
2. On the menu that appears, click –
a. Insert New Item Above to insert the new menu item
above the menu item you clicked
b. Insert New Item Below to insert the new menu item
below the menu item you clicked
c. Insert New Child Item to insert the new menu item as a
child item of the menu item you clicked
Notes: When you create the first menu item for a new activity group
menu, only the Insert New Child Item command is available
because the menu description must be at the highest level in the menu
structure. When you add a new menu item to an MRI-defined menu,
the system changes the color of the menu item text to green to
indicate it is a custom menu item.
3. Select Insert New Child Item from the menu and type a
name for the child menu item.

90 Web Design Training Guide


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

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

Defining Actions for Menu Items


The Action tab on the Web Menu Design view enables you to set up
the action you want the menu item to execute. You can set up a menu
item to -
• Have no action
• Load an MRI Web Page
• Link to an outside URL
• Execute an expression
• Link to an activity group menu, if the menu item is on the
master menu
• Open the last home page a user accesses, if the menu item is
on an activity group menu
To set an action for a menu item:
1. Select the desired menu item.
2. In the Action field, select the desired action to display the
applicable fields.
3. Use the information in the table below to define the menu item
that opens the destination page.

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

Web Design Training Guide 91


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

4. If adding a link to an MRI page, click on the Advanced button


to open the advanced options for the menu item.

92 Web Design Training Guide


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

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

5. Select the desired options and click OK


6. Click Save

Editing Menus in Web Design

Standard Activity Group menus in Web can be edited in the


Customize Menus screen. Application home screens can also be
edited here as well
To edit an Activity Group Menu:
1. On the File menu, click Customize Menus to display the
Select Existing Menu dialog box.

2. From this screen, select the Activity Group or Application Home


Screen menu that you would like to edit
Note: Activity Home Screen Menus will be named with the name of
the application and have “home” following it. Ex. Accounts Payable
Home, Commercial Management Home

Web Design Training Guide 93


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

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

94 Web Design Training Guide


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

Lesson 2: Editing Master Menus


Purpose
The purpose of this lesson is to show you how to edit the Application
Menu, Global Navigation Menu and the Setup and Maintenance Menu in
MRI Web Design.

Objectives
After completing this lesson, you will be able to:

• Edit the Application Menu


• Edit the Global Menu

• Edit the Setup and Maintenance Menu

Web Design Training Guide 95


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

Editing the Application Menu

To edit the Application Menu:


1. On the File menu, click Customize Menus to display the
Select Existing Menu dialog box. Click Cancel.
2. On the File menu in Web Menu Design, click Open
Application Menu.

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

96 Web Design Training Guide


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

Editing the Global Navigation Menu

To edit the Global Navigation Menu:


1. On the File menu, click Customize Menus to display the
Select Existing Menu dialog box. Click Cancel.
2. On the File menu in Web Menu Design, click Open Global
Navigation Menu.

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

Web Design Training Guide 97


© 2011 MRI Software, LLC
Module 8: Setting Up MRI for Web Menus

Editing the Setup and Maintenance Menu

To edit the Setup Menu:


1. On the File menu, click Customize Menus to display the
Select Existing Menu dialog box. Click Cancel.
2. On the File menu in Web Menu Design, click Open Setup
Navigation Menu.

3. You can now edit the options that appear in the Setup and
Maintenance Menu

98 Web Design Training Guide


© 2011 MRI Software, LLC
Module 9: Web Enabling a Report
Purpose
The purpose of this module is to provide you with the information that
you need to Web-enable a report.
Objectives
After completing this module, you will be able to:
• Set up custom report options in Web Design
• Make reports available through MRI for Web interface
• Web-enable a report
Before You Begin
If a report is Web-enabled and put out on the Web, it may have to be
changed if the underlying structures are different. Web-enabling
reports is more than just putting a runtime option on it and putting it
out on the web.
Some issues to keep in mind include:
• Downloading to Excel is different between Web and Windows.
• Importing and exporting to the Web is difficult because there is
no FILECOMMONDIALOG. You can only import/export reports
off of the Web server.

Web Design Training Guide 99


© 2011 MRI Software, LLC
Module 1: Database Schema Overview

Lesson 1: Setting Up Custom Report


Options in Web Design
Purpose
The purpose of this lesson is to show you how to set up custom report
options in Web Design.
MRI for Windows reports work in both the Windows and Web interfaces
without having to change the ReportDesign. However, when a report
contains custom report options, then those custom report options need
to be set up in Web Design.

Objectives
After completing this lesson, you will be able to set up custom report
options.

100 Report Design Training Guide


© 2010 MRI Software, LLC
Module 4: Objects in Web Design

Setting Up Custom Report Options


Overview
This section describes how to create a report page containing the
parameters for a single report and how to make the pages available to
Web users.
You can create a report page in Web Design that contains the
parameters for a single report. Also, you can set up a virtual report
page. A virtual report is a page from which users can run more than
one report. By creating virtual report pages, you can group reports
that share similar run-time parameters. Combining reports reduces the
number of entries in the My Reports listing on the master menu, which
make MRI for the Web easier to navigate.
Procedure
Complete the following steps create a custom report page that
contains report parameters:
1. Select File > New Activity Group. The New Activity Group
dialog box appears.
2. Complete the applicable fields.
3. Click Copy a page from another group, and click OK

The Copy Page dialog box appears.


From here, you can copy from an activity group or a Windows view (if
you click the Windows Views checkbox).
4. Check the Windows Views checkbox.
5. Select the EXPRPT, and click Copy.
6. Click Close.

Report Design Training Guide 101


© 2010 MRI Software, LLC
Module 1: Database Schema Overview

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

102 Report Design Training Guide


© 2010 MRI Software, LLC
Module 4: Objects in Web Design

13. Click Save.

Report Design Training Guide 103


© 2010 MRI Software, LLC
Module 1: Database Schema Overview

Lesson 2: Making Reports Available


through MRI for Web Interface
Purpose
The purpose of this lesson is to teach you how to make reports
available through MRI for Web interface.

Objectives
After completing this lesson, you will be able to make reports available
to Web users through MRI.

104 Report Design Training Guide


© 2010 MRI Software, LLC
Module 4: Objects in Web Design

Making Reports Available Through MRI for Web


Interface
Overview
For custom or MRI-supplied report pages created in Web Design, you
can specify which ones to include in MRI for the Web. Of the reports
you make available in MRI for the Web, you can further define which
reports are available to each user class. These features enable you to
make available only the reports that each user needs.
You must know how to use Web Design to put something on the Web.
Web Design contains pages, not views. There are also Activity Groups.
You can understand all of the valid Application IDs by searching the
MRI RPT table for the various types of Application IDs.
You cannot Web-enable an MRI report. You can right-click the report,
but it does not allow you to add runtime options. If you want to Web-
enable an MRI report, first copy it, then Web-enable it.
When you create the runtime options to run a report on the Web, they
can be created from scratch. You can copy runtime options from
Windows as a starting point.
The toolbar in Web Design is the same as in ViewDesign, with a few
slight differences:
• You can draw a box around the objects to keep them altogether
in Web Design
• Spaces (DIVS) have to be inserted in Web Design. This keeps
fields together and organized for spacing purposes

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.

Report Design Training Guide 105


© 2010 MRI Software, LLC
Module 1: Database Schema Overview

4. Right-click the report to display the shortcut menu, and click


Edit.

5. Select the activity group that has the custom web report option,
and click OK.

106 Report Design Training Guide


© 2010 MRI Software, LLC
Module 4: Objects in Web Design

Lesson 3: Web Enabling a Report


Purpose
The purpose of this lesson is to teach you how to complete the
necessary steps to Web-enable a report.

Objectives
After completing this lesson, you will be able to Web-enable a report
.

Report Design Training Guide 107


© 2010 MRI Software, LLC
Module 1: Database Schema Overview

Web-enabling a Report
Procedure
Complete the following steps to Web-enable a report:

1. In Web Design, select File > Copy Activity Group/Menus.

The Copy Activity Groups view appears.


2. Select the ViewDesign Views option at the top of the dialog
box.
3. Select the view that you need from the list.
4. Rename the view in the Description field.
5. Assign it to the application and report section to which the
report belongs by doing the following:
a. Select the appropriate application from the Application
field.
b. Select appropriate report category from the Category field.
6. Click Copy.

108 Report Design Training Guide


© 2010 MRI Software, LLC
Module 4: Objects in Web Design

7. Select File > Open Activity Group to open the copied activity
group.

Report Design Training Guide 109


© 2010 MRI Software, LLC
Module 1: Database Schema Overview

The Open Page/Group view appears.

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

110 Report Design Training Guide


© 2010 MRI Software, LLC
Module 4: Objects in Web Design

The Form Properties list appears.


10. Verify that the ReportOptions property value is set to “Yes.”

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.

Report Design Training Guide 111


© 2010 MRI Software, LLC
Module 1: Database Schema Overview

The WEBRPTS style is applied to the background and text boxes.

13. Once the report options are all set up, select File > Web
Reports to Web-enable the report you want.

The Web Reports view appears.


14. Right-click on the report you want to Web-enable, and select
Edit to link the report to the new report view that you created

112 Report Design Training Guide


© 2010 MRI Software, LLC
Module 4: Objects in Web Design

The Edit window appears.


15. Click the button with the three periods in it next to the Group
field

The Select Activity Group view appears.


16. Select the Web page you wish to attach as runtime options, and
click Select.

Report Design Training Guide 113


© 2010 MRI Software, LLC
Module 1: Database Schema Overview

17. In the Page field, select the page in the group to use, and click
OK.

114 Report Design Training Guide


© 2010 MRI Software, LLC

You might also like