Follow

Creating a new Zapp from a universal micro app

Creating a New Zapp from a Universal Micro App

 

Start creating a new Zapp by clicking the New Zapp button at the top of the Dashboard. You will be directed to a page with available Universal Micro App (template) categories as well as the option to begin with a "Blank" Zapp. Click on the category that best fits your use case.

 

 

You can see a list of available Universal Micro Apps, and clicking on each one allows you to preview all the pages along the bottom half of the screen. Select the micro app that matches your use-case and click Next.

 

 

The name and description of your Zapp are already filled and you can always edit those fields. Enter the URL of your web application and click Go.

 

 

The Zapp you selected is ready to be attached to the web application. You can also check out all the available pages in Style mode at any time.

 

 

 

Attaching a Universal Micro App to a Web Application

 

Now that your micro app is selected, you need to attach each mobile control to a corresponding web control on the web application.

 

The following video describes the process of attaching a Zapp to a web application. Detailed instructions are below.

 

 

To begin attaching, you can click directly on one of the controls in the mobile preview.

 

 

 

You now need to select the type of the web control you wish to attach to the selected mobile control.

 

The control toolbar becomes contextual to the selected mobile control and only relevant control types are available for selection. The most likely web control type is pre-selected but this can be changed any time by selecting a different type of the ones available.

 

 

 

Click on the web control that you wish to attach to the selected mobile control.

 

 

Your mobile control is now attached to the web. 

 

Repeat this process throughout your Zapp to attach all the virtual controls.

 

 

Attaching Controls Using the Wizard

 

A wizard is also available to guide you through the attachment process. To enable the wizard, click the “Get Started” button above the mobile preview.

 

 

The wizard will list the first attachment step and the corresponding mobile control will be highlighted. You are now in "Attach" mode.

 

 

Hover over the information icon in the wizard for more detailed instructions on each step.

 

 

Use the arrows at the top of the wizard to navigate through different attachment steps. If a particular control in the micro app is not relevant to your workflow, you can delete it via the wizard using the trash icon. Exit the wizard at any time using the “X.”

 

 

Once all controls for the page are attached, the wizard will display a confirmation message.

 

 

Attaching a Button

 

If the control you are attaching is a button, you can choose to keep the button as a virtual mobile control and not attach it to any web control.

 

In Attach Mode, click on the checkmark icon in the attach wizard next to the recycle bin icon to keep the button virtual.

 

Attach_wizard_for_button.png

 

 

Attachment Failed

 

The process of attaching a mobile control may not always succeed. Try selecting a different control type from the contextual toolbar that best matches the type of the web element you’re trying to select and try attaching again.

 

For example, the virtual mobile control in the micro app may be a simple text field but the web application actually offers a lookup field. In this case, you may want to select a lookup control type to indicate to Capriza that is the type of web control.

 

 

Can't Find the Right Control

 

If the mobile control in the micro app does not match any of the elements on the web page, you can either override it with a similar control or remove it completely.

 

For example, the details page in the Approvals micro app contains several text pairs, but you may not find all text pairs in your web application. When you select a text pair to attach to a web control, you can select a different pair and the sample mobile label and content will be replaced with the actual web label and content. 

 

Remember: Universal Micro App are inspirational and the sample content in each page is there to provide suggestions of the data that may be relevant to the user. The micro app can always be changed to match the actual content of your web application.

 

 

Editing the Zapp

 

Each page and mobile control can be edited, styled or removed completely. You can edit the style and layout of each page and you can also grab additional controls from the web application that are not offered in the Universal Micro App.

 

 

Adding Pages

 

Each web application is different and the Universal Micro App may not match the actual web application completely. In certain cases, you may need to add an automation flow after the login page in order to reach the list of pending approvals, for example.

 

When clicking on the Sign In button on the login page, you are automatically offered the next logical page in the Zapp. This is the case for any interaction or navigation within the micro app.

 

Screen_Shot_2017-05-24_at_4.02.31_PM.png

 

At this point you can select to add a new page instead and continue building your Zapp based on the actual flow on the web application.

 

When you’re done adding the automation flow to reach the pending approvals page, you can select it from the list of existing pages in the Zapp.

 

Screen_Shot_2017-05-24_at_4.02.31_PM.png

 

You can always add additional pages at any point in the workflow and then select the Universal Micro App pages from the existing pages dialog.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.