How do I configure a Designer Form?

This article explains how to create and edit the Designer Forms for a List App.  You can start with a form from scratch, or you can start with importing a form from EPM Live, then editing it as desired.

Note: The instructions in this article are applicable to Administrators in the Top Level Site as well as to Power Users who have Owner permissions on a workspace.

Note: Silverlight must be installed in order to configure the Designer Forms.  Silverlight is NOT needed for users to view/launch the forms.  

1. Navigate to the List App

Navigate to the List App where you will use the imported form.  For example, if you are importing a Project Form, navigate to the Project Center List App.

2. Select the Design Forms Icon

  1. Open the List Ribbon Tab.
  2. Select the Design Forms Button.

3. Three Forms

There are three forms for every List App: the New Form, the Edit Form, and the Display (View) Form.  You may easily create and edit all three to be the same or different.

Select whichever Form page to create or edit the Form.

4. Form Ribbon

From the Ribbon, you have the following options:

  • Save
  • Reset
  • Close
  • Remove
  • Javascript
  • CSS
  • Buttons
  • General
  • Export
  • Import
  • Help

5. Form General Settings

  1. Click General to open the form General Settings.
  2. Hide ribbon tab: Select the checkbox to hide the Edit tab from the New and Edit Form, as well as the View tab from the Display Form.  
  3. Show toolbar: Select the checkbox to display the toolbar with Attach, Edit, Delete, and other buttons at the top of the form.
  4. Redirect after submission URL: If desired, enter the redirect URL after the form is submitted/saved.
  5. Redirect after cancellation URL: If desired, enter the redirect URL after the form is cancelled.
  6. When finished, click OK.

5.1. Ribbon Tab and Toolbar Menus

  1. When the ribbon tab is shown (not hidden), it will show at the top of the form.
  2. When the toolbar is shown, it will show below the ribbon tab.  

6. Form Controls

The following controls are available to add to your form panel.

  • Table
  • Tab Control
  • Hyperlink
  • Button
  • Text
  • HTML
  • Related Items

7. Add a Table

Click, drag, and drop tables onto the form panel.  The Tables are the place holders, into which the other controls are added.  The other controls will be dropped onto the tables.

You can add multiple tables into another table, which will allow for multiple columns.

8. Add Tab Controls

Tab Controls allow the form to be separated into multiple tabbed pages.

  1. Click, drag, and drop a Tab Control to the Form.
  2. Enter the name for the tab(s).
  3. To edit or remove a tab, click the Edit or Remove buttons.
  4. For additional tabs, click the + button.

9. Add an Accordion

Accordions are useful for users to be able to expand and collapse the content on the form.

  1. Click, drag, and drop an Accordion to the Form.
  2. Name the Accordion.
  3. If you need to rename the Accordion, click the Edit button to the right.
  4. If you need to remove the Accordion, click the Remove button to the right.

10. Add a Hyperlink

  1. Click, drag, and drop the Hyperlink control onto the Form.  
  2. Type the address/destination in the OnClick section when users click the hyperlink.
  3. Type the text that is to appear as the link text.

11. Add a Button

  1. Click, drag, and drop the Button control onto the Form.  
  2. Type the address/destination in the OnClick section when users click the button.
  3. Type the text that is to appear on the button.

12. Add Text

Click, drag, and drop a Text control onto the Form.

Enter the desired text.  This can be used to help delineate sections of the Form.  It can also help explain to users the type of data to be entered.

13. Add HTML

If desired, click, drag, and drop the HTML control to the Form.  Then enter the HTML code desired.

14. Add Related Items

The Related Items control allows for associated items to show on the form for this List App.  For example, on the Project Center form, there might be a panel showing issues for that project.  On the Project Portfolios form, there might be a panel showing active projects for that portfolio.

Click, drag, and drop the Related Items control onto one of the tables.

15. Configure Related Items

  1. Click anywhere in the Related Items control to activate its menu.
  2. Click the elipses button to edit the Data Source.
  3. Select the List App as the Data Source.  
  4. Select a View for filtering purposes.
  5. Select the checkbox to filter by Lookup field.  Then, select the Lookup field.  If this setting is left unchecked, all items would show.  In the example above, only active issues for the selected project would show. If the filter were unchecked, all active issues (for all projects) would show.
  6. When finished, click the OK button.

16. List Fields

Any visible fields that have been created in the List App are available to add to the form.  

Note: If a field is required in the List App, be sure to have that field added to the New Form.  Otherwise a new item can't be saved.

17. Add List Fields

Click, drag, and drop the List Fields into the tables on your Form.  

18. Add the Save & Cancel Buttons

Click Buttons to add the Save & Close/Cancel buttons as available controls on the form.  Then, the Save and Cancel/Close buttons can be added anywhere on the form.

When the buttons are added, the Buttons icon will have a blue box background around it.

19. Save Form(s)

To save this form for the visible page only, click the Save button.  Or, click the Save drop down if you want to save this form as the one or both of the other form pages.  For example, if you are on the Display Form page, that checkbox will be selected automatically.  You can save the same settings to the New Form as well.

Comments

0 comments

Please sign in to leave a comment.