Creating New Custom MFP UIs

The following describes the steps to take when creating a custom MFP UI. Use the Custom UIs page, as shown in the following illustration:

Creating a UI

Use these initial steps to create the UI, name it, and indicate the type of service.

1. On the MarketPlace, click on the MFP UIs button on the MarketPlace menu bar. The Custom UIs page appears.
2. On the Custom UIs page, click on the + New button. The Create MFP UI window appears:
   
3. On the Create MFP UI window, enter an identifying name for your new MFP UI. The maximum length is 16 characters. You can also enter an optional description. The description appears in the Custom UIs table and can help distinguish the UI from others in the table. When done, select the Create button. The Choose a service template window appears.
4. Use the Choose a service template window to select a template on which to base your UI. Take the following steps:
   1. At the Application Type drop-down, select an application type. You have the following options:
      • UI Design - Creates a full-sized app you can access on the MarketPlace Home page on the device.
      • Widget App - Creates a tile you can add to the device's Home page, providing quicker access to the app functionality in the tile and eliminating the need to navigate to the MarketPlace Home page on the device. Tile UIs are supported only on i-Series devices. This option also creates an app you can access on the MarketPlace Home page on the device.
        
   2. Choose a service template from the Template Selection table. The options in the table differ depending on your selection at the Application Type field. The table includes the following columns, left to right:
      • Service Category - Broad categories of services you can add to a UI, for example Print or Scan.
      • Service Type - The services available based on the selected service category.
      • Service Template - The templates available based on the selected service type.
      The Templates column updates based on the selected service type. You can choose a template that already includes controls, or you can start from scratch with a blank template. See the following illustration:
      
5. Click on a template, then click on the Create button. The Designer Tool appears, displaying the new UI.

Service Types

The following table lists all available service types:

Configuring the UI

Once you have created the UI, you can now configure it to your specifications using the Designer Tool. You can access the Designer Tool in the following ways:

• At the conclusion of the Create UI process, on the Choose a service template window, click on the Create button.

• On the Custom UIs page, select Edit UI from the ellipsis button menu for a UI.

Using the Designer Tool, you can configure your MFP UI by dragging and dropping controls from the Widgets area’s Basic, Advanced, and Common tabs and positioning them onto the work area. You can also create, duplicate, rename, or delete panels using the buttons on the top menu bar.

• To customize the panel background, click on the work area. The Page panel appears, allowing you to choose a background color or image for the panel. See the following illustration:

• To customize the properties of a particular control, select the control in the work area. The Properties panel appears. For example, in the following illustration, the initial value, shape, color, and location/size of the No. of Sets input field can be configured:

The following table lists the various settings that can be configured, depending on which control is selected.

• To duplicate or delete a control, select the control in the work area, then do one of the following:

  • Duplicate - Click on the green icon ( + ) underneath the control.

  • Remove - Click on the red icon ( X ) underneath the control.

• To add a hidden control to the panel, drag-drop the control from the Widgets area to the Hidden Widgets area; then customize the control accordingly. This control will not display on the MFP UI. However, its properties will be saved and used as the default setting. For example, if you want all copies to always print double-sided, without allowing for any modification by users at the device, you could drag-drop a Copy Duplex control from the Widgets area to the Hidden Widgets area. Then, customize the control with an Initial Value of duplex.

• To rename the MFP UI and select an icon for it, do the following:

  1. Select the Edit name and icon button on Title bar of the Designer Tool:

     The Edit Name and Icon pop-up window appears, as in the following illustration:

2. To rename the MFP UI, enter a new name in the Name field.

3. To choose a different icon to display, select an icon.

4. When you are done, select the OK button.

   Tip: As a quick way to rename your MFP UI, you can highlight the name listed at the top of the Designer Tool. Once you type in the new name, select the Done button. Note that you must publish the MFP UI in order for the new name to be reflected on the MFP UIs page.

• To resize a control, select the control in the work area and use the mouse to drag the image inward or outward.

Customize Error Messages

You can also customize the appearance of the error messages that may appear. Do the following:

1. Select the Error link. The Error dialog appears:

2. Click on the section of the Error dialog box that you want to modify. The Properties panel updates based on your selection.

3. Use the Properties panel to make your changes. The Error dialog box updates to reflect your changes.

In the illustration below, note the following:

1. In the New Service panel, the Error link is selected, causing the Error dialog box to display in the work area.

2. In the Error dialog box, the Description label is selected, causing the Properties panel to display the Label options.

3. In the Properties (Label) panel, the cursor has been placed in the Text field, indicating the field is ready for edits.

Test Panels

Once you have created an MFP UI panel, you can test it in the Designer Tool to ensure it functions properly before installing it on the UI on a device. You can set up a “test condition” that simulates the device’s features and configuration, and then specify the job result for which you want to test (for example, “Success” or “Validation Error”).

To set up a test condition, do the following:

1. Click on the Test Mode button at the top of the page.

2. In the Test Conditions area, select the specifications for the device on which the custom MFP UI will be installed. You can define the following:

   • MFP Type - Specify the MFP type, for example, A3/A4 Color or PP (Production Print) Black.

   • IWS Version - Specify the device’s IWS (Internet Web Service) version.

   • Tray - Select one or more paper trays, and/or bypass trays.

   • Finisher - If a finisher is installed on the device, select “Mount”. Otherwise, select “None”.

   • Punch - If the Hole Punch feature is installed on the device, select the hole punch configuration. Otherwise, select “None”.

   • Fax Kit - If a FAX kit is installed on the device, specify whether to enable or disable the FAX kit. Otherwise, select “Disable”.

   • iOption - If an iOption kit is installed on the device, select the kit. Otherwise, select “Standard”.

   • Job Result - Specify the job result you want to test for. You have the following options:

     • Success
     • Unexpected Error
     • Permission Error
     • Validation Error
     • NotSupported Error
     • Invalid State Error

   • Reset - To reset the test condition to the default configuration, click on this button.

3. In the Work area, click on the UI’s various controls to simulate the MFP experience. When you execute the operation in the UI (for example, for the Copy operation, click on the Copy button to execute the copy procedure), one of the following will occur:

   • The test completed successfully, with no error messages appearing.

   • The test completed successfully, with the specified error message appearing based on your selection at the Job Result field.

   • The test failed because of a configuration issue in the work area for the UI (for example, a hole-punch operation was selected but the device does not support hole punch).

4. When done, click on the Edit Mode button to exit Test Mode and return to the Designer Tool.

Linking Panels

You can link your MFP UI panels together using the Link button control. Do the following:

1. Drag-drop the Link button control onto the designer’s work area.

2. Click on the control to edit its properties.

3. From the Link To drop-down list, choose the MFP UI panel that you want to link to, or click on the URL option to enter a website address to link to.

Use the Launcher Screen

The Launcher screen provides access to other device screens, MarketPlace apps, and any Open API apps that are installed on the device. To use the Launcher screen, do the following:

1. Create a new MFP UI or add a new panel to an existing custom MFP UI.

2. On the Choose a service template window, do the following:

   • Select the Launcher option. The Empty template will be selected by default.

   • Enter a name for the Launcher screen in the Service Name field; then select the Create button.

3. You can choose to add the following to your MFP UI panel:

   • Launcher button - Link to a device’s Menu screen, Copy screen, Scan screen, Box screen, Web Browser, and App Menu. You can also link directly to another Open API app installed on the device by entering either the application ID or name.

   • Application list - Brings you to a list of apps.

   • Label - Text labels that will appear on the MFP UI.

   • Text - Text that will appear on the MFP UI.

   • Link Label - A label that links to or runs a specific panel within the MFP UI.

   • Link Button - A button that links to or runs a specific panel within the MFP UI.

   • Image - An image to add to the background.

For both the Link Label and the Link Button, you can specify “Run Panel” shortcut links that automatically run another panel in the background when that label or button is tapped at the device. For example, if you have a “Copy” panel already defined, you can create a “Copy” button with a shortcut of “Run Panel:Copy Panel”. When the device user taps on that “Copy” button, the copy operation automatically begins with the default settings (instead of displaying the “Copy” panel). Note that these shortcut settings are not advised for panels requiring user input (e.g., Scan to Box). In addition, you must have more than one panel created in the UI in order to see “Run Panel” options.