This topic will walk you through the steps to use the #ew_create_record macro to create a record submission form for the Tasks table.

The basic steps for adding a new page to the EUI are:

• Create the HTML template
• Add a link from the menu and/or home page
• Set user permissions and create an end user layout. 

To create a page in the EUI that gives end users the ability to submit a task:

1. Navigate to the EUI Templates table.
2. Copy the template new_user.html to use as a starting point. When prompted, enter the name "new_task.html" for this template record. 
   1. Click Finish. 
3. Open new_task.html for edit and change the Description to "Page for creating new tasks in the EUI". 

4. The <iframe> tag which contains the #ew_create_record macro will be similar to the following:

   <iframe src='#ew_create_record("contacts.employees" "/eui2template/main.php" "parent")' name="content_frame" id="frameres" width="100%" frameborder="0"></iframe>

5. Replace contacts.employees (the first parameter) with "task" (the logical table name of the Tasks table). 

6. Click Save. 

Working with menu.htm

The next step in making this page accessible is to add a link from the menu by making a few changes to menu.htm. Each menu tab is a list item <li> containing a link to a template page. Menu.htm makes heavy use of conditionals and the method $ewUser.isInGroup to ensure that different types of end users see only the tabs relevant to them. 

In the initial default setup, the EUI is configured for users in several different groups. The table below outlines the available functions and navigational tabs each user group sees when accessing the EUI:

Any groups not listed above will see the following tabs:

• Home
• New (Support Case)
• View (Support Cases)
• FAQ (Support Cases)
• My Profile

Let's look at the first <li> item in menu.htm:

<li id="main"><a href='#ew_forward("main.php")'>$ewText.get("menu.home")</a></li>

There are a few things to note about the code.

• The link's href attribute is formed with the #ew_forward macro. This macro forwards the user to the page specified by the $templateName parameter.

  Using $ew_forward keeps the user logged in to while navigating between pages.

• The link text is referenced by the method $ewText.get(). We will return to $ewText.get in more detail a little later. 

• Each list item is assigned an ID. For the Home tab link above, the ID is "main". Each menu tab is assigned an ID that refers to some part of the URL (i.e. main.php). Note that the ID here only uses the URL name for the sake of convenience.

Highlighting the Active Menu Tab

The menu tab's ID is used in part by the JavaScript function menuChange(). This simple script allows the browser to recognize the current page and highlight the corresponding menu tab:

In menu.htm, scroll to the Body field. Locate the <script> section and the block of text beginning function menuChange(). 

function menuChange() {
  if (document.getElementById && document.createTextNode) {
    if (homepage || location.href.match('main.php')) {
      document.getElementById('main').className='active';
    } else  if (location.href.match('new_user')) {
      document.getElementById('new_user').className='active';
    } else  if (location.href.match('new_')) {
      document.getElementById('new').className='active';
    } else if (location.href.match('-faq')) {
      document.getElementById('faq').className='active';
    } else if (location.href.match('my_profile')) {
      document.getElementById('my_profile').className='active';
    }else if (location.href.match('my_') || location.href.match('open') || location.href.match('all_')) {
      document.getElementById('view').className='active';
    } else if (location.href.match('chat')) {
      document.getElementById('chat').className='active';
    } 
  }
}

This piece of JavaScript looks at the browser's current URL.

• If it finds the 'main.php' in the URL, it assigns the 'active' CSS class to the element on the page with an ID of 'main'. 
• If 'main.php' is not in the URL, it goes through the remaining conditions in the script. Next, it looks for the URL string 'new_user' to find a match, followed by 'new_' and so on. 

The stylesheet style.css holds a rule that sets the background color of an 'active' menu tab.

Link to the New Page

Set Table Permissions

The next step in creating a task submission page is to create an end user layout and give the appropriate users access permissions to the Tasks table.

1. Navigate to Setup gear > Tables > Tasks > Edit > Layout. 
   1. Check if an end user layout exists; if not, copy the Power User layout and make additional changes if desired. 
   2. Click Finish to save the changes. 
2. Navigate to Setup gear > Access > Manage Groups, then edit the Customer group. 
   1. On the Table tab, find and edit the Task table. 
   2. On the Record Permissions tab, allow the group to Create Tasks and View their own Tasks. 
   3. On the Field Permissions tab, make sure that the Customer group can View own and Create the necessary fields. .
   4. When you are done, click Finish in the Table Permissions wizard and then Finish again in the Manage Groups wizard. 
   5. View the completed task submission page in the EUI.