Table of Contents
Previous | Next

End-User Area: Sample Illustrative Domains

To illustrate some of the externally visible features of the EndApps Platform, the website that ships with the EndApps Platform SDK includes two sample domains.

1) Job Board

2) Admin

Picture 34

Figure 24: Shortcuts showing the sample domains

The Job Board Sample Domain

Note: Apart from implementing the EndApps APIs, configuring metadata and editing labels, ALL the functionality that will be explored in the Job Board Sample Domain are entirely built-in functions of the EndApps platform

The Job Board domain is an application that models an old fashioned Job Board where Employers working for particular Companies can place Job-postings and Jobseekers can place resumes. For brevity we will simply call it “JobBoard”.

The primary concepts in JobBoard are:

1) Resume

2) Job Posting

3) Company

To support these activities, JobBoard contains the following additional concepts that are managed by administrative personnel.

1) Education Level

2) Experience Level

3) Country List

4) States/Provinces List

The JobBoard also contains two specialized activities

1) Job Posting Skills Search (“Search for Jobs”)

2) Resume Skills Search (“Search for Resumes”)

JobBoard: Query, Tags and Create Views

Picture 17

Figure 25: JobBoard domain

Navigationally, JobBoard is split into two parts

1) Jobseeker functions

2) Employer functions

There are three Jobseeker functions

a. Search For Jobs

b. Review Tagged jobs

c. Post Resume

There are four Employer functions

a. Search for Resumes

b. Review Tagged Resumes

c. Post a Job

d. Create a Company Profile

Picture 18

Figure 26: Jobseeker functions

Picture 19

Figure 27: Employer functions

Search for Jobs: A Query View

Picture 25

Clicking on the “Search for Jobs” icon in the Jobseeker shortcuts opens the “Search for Jobs” screen.

Backend queries are usually represented in the UI by the Query View. Query Views enables the UI to take in user input, pass the input to the backend, and display any resulting data.

The “Search for Jobs” screen is a Query View.

The “Search for Jobs” screen is composed of three primary sections:

1) The Input Section

2) The Query History Section

3) The Results Section

Picture 20

Figure 28: A Custom Query Screen

The Input Section

The input section contains input controls like textboxes, drop-downs and checkboxes that are used to receive user input. In the “Search for Jobs” example, the underlining API requires four inputs:

1) Search Criteria

2) Country ID (Re-labeled “Country”, re-configured into dropdown)

3) State ID (Re-labeled “State” , re-configured into dropdown)

4) City

Picture 21

Figure 29: The Input Section of a Custom Query

The Query History Section

The Query History Section is populated when the user click the “Save this query” button in the results section.

For regularly repeated inputs, it saves the user from having to re-enter the input over and over again. Clicking on the edit icon at the top right of each pictogram allows the user to add a description for each saved query.

Clicking on a pictogram executes a saved query.

Picture 22

Figure 30: The Query History Section of a Custom Query

The Results Section

The Result Section displays the results of the execution of the custom query. The columns in the Result Section’s grid pre-defined, but columns that are deemed to be less relevant may be excluded from the grid. The labels of the column headers and the layout of the grid can be edited in Designer Mode.

Picture 23

Figure 31: The Results Section of a Custom Query

After the query is executed, the user can save the query that just executed by clicking the “Save this Query” button at the top of the Results Section.

Picture 1

Figure 32: Save query button

Result Item Actions

Depending on configuration, each result item may have some actions that may be performed against it

1) Delete delete.png

2) Edit edit.png

3) Details details.png

4) Tag tags-label.png

Delete – This action, through a confirmation message dialog, will delete the item.

Edit – This action will open an edit page

Details – This action show more details about the item

Tag – This action opens the Tag Item dialog. The Tag Item dialog is usually configured to be context specific. See the Configuring the Tag Item topic.

Review Tagged Jobs

Picture 27

Clicking on the “Review Tagged Jobs” icon in the jobseeker shortcuts opens a page that shows all the Tags that the logged-on user has assigned for Job-postings. This is the “Tags” screen for the Job-Posting entity.

Tagging a Job-posting makes it easier to review interesting postings at a later time. Applying the same Tag to multiple postings categories the Job-postings, and in the “Tags” screen, one can then click on a Tag and gain access to the affected job-postings.

Picture 29

Figure 33: The "Tags" screen with no tag selected

Picture 30

Figure 34: The “Tags” screen with a Tag selected

Post a resume: A create View

Picture 28

Clicking on the “Post a Resume” icon displays a form that, when populated and submitted, adds a resume to the JobBoard.

Picture 31

Figure 35: A typical form in the EndApps platform

The Admin Sample Domain

Note: Apart from implementing the EndApps APIs, configuring metadata and editing labels, ALL the functionalities that will be explored in the Admin Sample Domain are entirely built-in functions of the EndApps platform

The Admin domain is an application that models a simple ordering system. Only two entities are shown in the sample:

1) Customer

2) Order

Picture 32

Figure 36: Admin Domain

Admin: List and Directory Views

Picture 36

Figure 37: Admin Shortcuts

Clicking on the Customer icon leads to a screen displaying the Customer Shortcuts

Picture 37

Figure 38: Customer Shortcuts

List of Customers: An Index or List VIew

Clicking on the “List of Customers” icon displays the “List of Customers” screen.

Picture 38

Figure 39: The List screen

Exploring the List Screen

A list screen is composed of the following elements:

1) The list control bar

2) The table header

3) The table body

4) The results message

The List Control bar

Picture 44

Figure 40: The List Control bar

The list control bar is made up of the following elements

1) Title Picture 39

2) Create button Picture 40

3) Paging buttons Picture 41

4) Export button Picture 42

5) Info Pane button Picture 43

The Title element displays the title of the list. The title can be changed while in Editor Admin Mode.

The Create button element, when clicked, will display a form that can be used to create a new item.

The Paging Buttons

The Paging buttons can be used to page through a large list of items. The paging buttons change to accommodate different number of pages. Figure 36 shows paging buttons for a list with a large number of pages.

Picture 45

Figure 41: Paging buttons with numerous pages

The Export Button

Clicking the Export button opens the Export Dialog for the list.

Picture 47

Figure 42: Export Dialog

The Export feature can either “Export” or “Print” data.

Export produces data as xml, while print copies the html that represents the data.

The data produced by the Export feature can be made to open in Microsoft Word or Excel, or just the currently active web browser.

Also, the user can choose to export only certain fields. The default is to export all available fields.

The Info Pane

The Info Pane is used to add, edit or display help and descriptive information about a screen or an activity. The contents of the Info Pane can be changed while in Editor Admin Mode. An embedded link in the content can be used to power the external links button. Picture 49

Picture 48

Figure 43: The Info Pane

The table Header

Picture 50

Figure 44: Table Header

The Table Header element contains the column headers of the tabular data.

While In Designer Admin Mode, headers can be added or removed, the text of the column headers can be changed, and the ability to sort the table via a particular header can be switched on or off.

Sorting

Picture 51

Figure 45: Column sort buttons

Clicking the sort button beside the column header causes the data in the grid to be sorted in ascending or descending order, by the specified column. Clicking a sort button besides a different column causes the data to be sorted by the current and previous columns, but with the last column clicked taking precedence. In this way, the data can be sorted by all columns in the grid that has sort enabled.

Picture 53

Figure 46: Column headers and sort precedence

The last sort button to be clicked will have the green sort indicator besides the column name, the column that was clicked before that will have the yellow sort indicator, while the columns clicked earlier, will have the grey sort indicator.

The Table body

The Table body displays the items in a grid. While In Designer Admin Mode, the content displayed can be formatted with an Html Editor.

Picture 54

Figure 47: Table body

If there are actions that can be carried out against an item, those actions will be grouped together in the right most column of the grid. The Figure above shows edit, view and delete actions in the last column.

The Results message

The Results message element usually displays information about the total number of items and the current page’s relationship to the overall paging scheme.

Picture 55

Customer Directory

A directory is a user configured categorization of data in a dataset.

The user can select desired fields, apply filters against the fields, and arrange the fields and filters in a hierarchical order. All this can be done directly from the UI without the aid of a developer.

Directories can be created or configured while the application is in Designer Admin Mode.

Directories are sometimes called Categories depending on the entities involved. For example, Customers have Directories and Orders have Categories.

Picture 7

Figure 48: Customer Shortcuts with the Customer Directory highlighted

Picture 52

Figure 49: The Customer Directory screen

Apart from the UI elements that it shares with the List screen, a Directory screen has the following additional elements:

1) Directory Menu

2) List of Directories

Directory Menu

Picture 16

Figure 50: Alphabetized directory with submenus

Picture 33

Figure 51: Alphabetized directory showing submenu

A Directory’s menu is created on-the-fly by the platform based on how the Directory is configured.

The Directory menu depicted in Figure above is based on the configuration information depicted in the Figure below.

Looking at the generated menu and its configuration, the Email field is used as the top level filter, while the three Sign-Up date ranges makeup the sub filters. So if the “F” button is clicked, the data displayed will be all customers with email addresses that start with “F”. If the submenu of “Jan 2011 to Dec 2012” is clicked, the data displayed will be customers that signed-up between Jan 2011 and Dec 2012 that also have email addresses that start with “F”.

Picture 46

Figure 52: Configuration snippet for alphabetized directory with submenu

For more information about configuring a ‘Field List’, see Configuring the ‘Field List’.

The Directory menu depicted in Figure 48 is based on the configuration information depicted in Figure 49,

Picture 57

Figure 53: Alphabetized directory

Picture 56

Figure 54: Configuration snippet for alphabetized directory

List of Directories

Picture 58

Figure 55: The List of available Directories

The List of Directories shows all available Directories other than the currently selected Directory. New Directories can be created while in Designer Mode.

Picture 59

Figure 56: List of Directories while in Designer Mode

Using Orders to Explore Rolls

In EndApps, a Roll is a view of a dataset where the data is displayed as compact summaries or pictograms.

Picture 1

Figure : Orders Roll

Apart from features shared with lists and directories like Title, Create, Paging and Export buttons, the Roll screen is made up of three additional segments

1) The Roll Header

2) The Roll Container

3) The pictogram

The Roll Header

The Roll Header contains fields that can be used for sorting the Roll data.

Picture 4

Figure : Roll Header

While in Designer Admin Mode, additional fields may be added or existing fields removed. It is also possible to hide the Roll Header.

The Roll Container

The Roll Container contains the pictograms.

The Pictogram

Picture 7

Figure : Roll Pictogram

The Pictogram displays an item’s data. The pictogram consists of a background image to the left, a summary of the item data in the middle and a vertical actions bar at the right.

All the components of a pictogram can be configured while in Designer Admin Mode. See sample designer screen below.

Picture 10

Picture 13

Table of Contents
Previous | Next