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
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
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
Figure 26: Jobseeker functions
Figure 27: Employer functions
Search for Jobs: A Query View
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
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
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.
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.
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.
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 
2) Edit 
3) Details 
4) Tag 
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
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.
Figure 33: The "Tags" screen with no tag selected
Figure 34: The “Tags” screen with a Tag selected
Post a resume: A create View
Clicking on the “Post a Resume” icon displays a form that, when populated and submitted, adds a resume to the JobBoard.
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
Figure 36: Admin Domain
Admin: List and Directory Views
Figure 37: Admin Shortcuts
Clicking on the Customer icon leads to a screen displaying the Customer Shortcuts
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.
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
Figure 40: The List Control bar
The list control bar is made up of the following elements
1) Title 
2) Create button 
3) Paging buttons 
4) Export button 
5) Info Pane button 
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.
Figure 41: Paging buttons with numerous pages
The Export Button
Clicking the Export button opens the Export Dialog for the list.
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. 
Figure 43: The Info Pane
The table Header
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
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.
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.
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.
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.
Figure 48: Customer Shortcuts with the Customer Directory highlighted
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
Figure 50: Alphabetized directory with submenus
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”.
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,
Figure 53: Alphabetized directory
Figure 54: Configuration snippet for alphabetized directory
List of Directories
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.
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.
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.
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
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.
