Create and edit Dynamics CRM mobile forms for Express phones. Mobile forms: how to replace drop-down lists

Ask any adult what item they cannot leave home without, and they will answer you: keys, wallet, mobile phone. With the growth of mobile device manufacturers and the release of new and improved models, it is simply impossible not to succumb to this growing trend.

Data from 2014 shows that in the US alone, 90% of adults have a mobile phone, of which 58% are smartphone owners. 42% of Americans own tablets. In a report, eMarketer predicted that by the end of 2014, people will be using about 1.75 billion smartphones worldwide.

These figures only confirm that mobile devices today have turned from luxury items into our everyday necessity. If in the past, phones were only a communication tool, now we rely on them when we work, relax, or go shopping.

Optimizing forms for mobile devices

The rise of smartphones doesn't just make shopping easier for consumers. This is a welcome addition to the already growing online shopping industry. Over time, not only online, but also offline businesses began to understand the importance mobile phones, along with other promotion channels, in obtaining customers.

Forms feedback play a huge role in online shopping, they are also a core element in the mobile platform. We usually encounter them when we make a purchase and the site asks us to provide specific information such as name, address, phone number and credit card information. However, many buyers find filling out forms a tedious task, which can ruin their interest. Additionally, online shoppers tend to face challenges such as lack of time or poor internet connection, which can negatively impact your mobile site's conversion rate.

Listed below are 10 ways to speed up your customers' mobile transaction performance and also make their online shopping experience enjoyable.

1. Include only the most important details in your form.

If you don't have the patience to fill out tons of forms on a web page while you're shopping online, then your customers probably feel the same way. There is a difference between filling out a Full-On form and filling out a simple form to purchase something from an online store. Compared to the latter, the first version of the form can be quite annoying, and you risk losing the client when he gets tired of filling out the form, especially if he sees that he needs to provide three different phone numbers.

Make online mobile shopping convenient by providing your customers with a simple yet complete order form. Only ask users for valid important information, such as full name, address Email, phone number, shipping information and credit card information. You can also include a dropdown list of states or countries you ship to, or better yet, have your mobile app requests geolocation from clients. This way, you can get their address quickly and accurately.

2. Use height alignment for labels and input fields.

Smartphones have a limited viewing area compared to PCs, so it is important that you design a shape that maximizes this area. One way to do this is to use vertical alignment for your form fields. You see, when for a form it is used horizontal alignment, there is a possibility that not all the information will fit on the smartphone screen, and the label or input field may be lost. Such order forms can look cumbersome to buyers, which can reduce their interest.

On the other hand, if labels and input fields are positioned vertically, it will be easier for your customers to immediately see the information they are asking for, including what they need to fill out. This will help them be confident in the security of the transaction. This layout will also prevent shoppers from missing any input fields, or worse, filling out the form again.

Plus, it will minimize the visual clutter of your shapes. “What is this” and “More details” buttons can be placed on the mobile version of your website. If these buttons need to be placed on a form, then position them so that customers are not distracted from making a purchase.

3. Use drop-down menus and drop-down lists

Another limitation caused by the limited viewing area in mobile device, this is the endless scrolling that we have to do to view the entire page or to fill out a form. Although scrolling the screen is quite common, smartphone users would prefer to have by quick means shopping for goods online.

Using pull-down menus and drop-down lists can help you reduce the time your customers spend filling out forms. Instead of forcing buyers to choose from huge amount options, you can group individual products into categories. Pull-down menus are also useful for linking descriptions of your key products that you want to put on one page. Just remember not to start describing them while the menu is expanding.

4. Use adequate selection lists

In cases where drop-down lists or pull-down menus don't fit well with your mobile site forms, you have two great options for mobile forms: Predictive search input fields and private drop-down lists.

Predictive search input fields allow your customers to search for the product or service they need by keywords, and also displays a list of all similar results. This type of form is ideal in cases where the search is expected to take a long time, or when there are a number of products that do not fall into separate categories. Closed dropdown lists, on the other hand, work well for lists of specific menu items located in in a certain order, for example in alphabetical or chronological order.

5. Easy input data entry

You've probably encountered input fields on forms on both web and mobile sites. Sometimes they are divided into 2-3 parts, such as name, address, telephone number. And although this works on sites, on their mobile versions This use of forms is not always appropriate.

Most often, splitting the input data requires mobile shoppers, fill out all three (or two) input fields in order to simply respond to one label. If you're going to overdo it in the same form, your customers may lose interest in the process. In addition, the separation of input data may be perceived ambiguously by clients, or even confuse them. When designing forms for mobile platforms, use more simple fields input instead of separating them. For example, instead of having two separate fields for first and last name, use one. This will help your customers complete the form faster.

6. Format your form buttons

The “Confirm” button is last step in online shopping, as well as the most important button on the form. If so, then you should arrange it in such a way that your customers remain involved in the process of filling out the form.

Make the “Confirm” button attractive by setting its width to 1/3 of your form, or by coloring it bright color. And instead of simply using the words “Confirm” or “Submit,” use more eloquent calls to action, such as “Register now” or “Submit your application.”

However, avoid using too bright colors or making buttons that move too much, as this will distract your customers from clicking. You can barely use noticeable change colors or hovering when a button is pressed so your customers know they are done with the transaction.

7. Set zoom using the viewport meta tag

Browsing on a mobile device may either suit customers or they may have to keep zooming in on the page, but if they do this accidentally, they may get lost on the page. You will be able to control this using the viewport meta tag in your forms. This will allow your customers to avoid accidentally scaling the page, or worse, losing sight of the form altogether.

8. Provide the ability to save data

Shopping using mobile phones can be challenging task for some clients, because there is a risk of clicking the “Back” button or accidentally reloading the page, and if all the filled-in information disappears, then your buyer will most likely refuse the transaction. You can avoid this possibility by providing your clients with an “Open in new tab” option when they click on any link outside the form.

Additionally, in cases where users can no longer return to previous pages, make a window with a warning and buttons like “Agree”, “OK” or “Cancel”. By doing this, you can alert your customers whether their data has been saved on the site or in the browser, and thus help them decide to proceed to checkout.

9. Help clients track their progress

Not all buyers are interested in filling out feedback forms. In this case, it will be useful for you to come up with a way to show clients that they are almost at the very end of filling it out. You can do this by placing a loading bar at the top of the form, or by using a simple timeline and percentages to show what step they are at. Remember to limit the number of these steps to save your clients time.

10. Make the form load quickly

Another factor you shouldn't forget is the loading speed of your mobile form. If the page takes a while to load, your customer may be off the hook. The very fact that your users have reached the point of filling out the form shows that they are ready to place an order. Don't disappoint them with poorly loading pages. The loading speed of your forms also depends on the number of elements you put on the page, so be careful when using huge images.

And as always, test your forms on all systems and devices

Nowadays, the variety of mobile devices and their interfaces requires us to design forms for each of them. Therefore, make sure that you test your forms on different types of mobile devices, taking into account differences in operating systems, sizes, and browsers. With testing, you can not only improve your form, but also make sure that it works on all available devices.

This article is an announcement of new functionality.
It is not recommended to use the contents of this article to learn new functionality.
Full description new functionality will be provided in the documentation for the corresponding version.
Full list changes in new version is provided in the v8Update.htm file.

Implemented in version 8.3.11.2867.

We continue to develop the mobile platform, adding functionality that is already available in the platform for personal computers. In addition, we are developing specific platform capabilities that are relevant only for mobile devices. We will now tell you about some of the most important improvements.

Scheduler

The object model of the “mobile” scheduler has not changed, but the way the user interacts with the scheduler has changed, since the methods for entering information on mobile devices differ from those used on desktop computers.

For example, quick editing element is performed by a single click on the element. Long press calls context menu, and to the appearance of markers that allow you to stretch the element. Dragging is done by long pressing and then moving your finger.

Scrolling the entire planner is done by scrolling with one finger, zooming with two fingers, and so on.

A feature of the current implementation of the “mobile” scheduler is that it does not yet support printing.

Formatted document

Another “new” object that we have added to the mobile platform is FormattedDocument. From the user's point of view, a “mobile” formatted document differs only in that its editing panel is built into the control itself, and is a logical part virtual keyboard. You, as developers, are not required to separate addition to the configuration. The editing panel has different type depending on the type of mobile device (phone or tablet).

Preview of the “mobile” form in the configurator

In the configurator, when developing a form, we added the ability to see how your form will look on a mobile device.

In the command panel you can select an interface option Mobile device, and see what the form will look like in standard orientation.

Here you can rotate your mobile device.

In addition, we have given you the opportunity to choose from large number common devices.

In addition, you can view mobile forms in three different scales:

Pixel to pixel- when a mobile device screen pixel corresponds to a window screen pixel preview;
Actual size - when the size of the mobile device on the screen corresponds to the geometric dimensions of the device;
By window size- when the display scale is selected in such a way that the “mobile” display area fits into the preview window without scrolling.

Batch processing of spreadsheet documents

We have added a number of new objects to the mobile platform that allow you to create packages of displayed documents. This functionality is similar to that found in the PC platform. Thus, you can now, for example, send several documents for printing at once.

Development of deliverable notifications

We have implemented support for the Windows push notification service (WNS, Windows Notification Services). Now you can use the functionality of delivered notifications when running a mobile application on platforms of the Windows family.

We have also reworked the error handling system for sending delivered notifications. In situations where an error was previously thrown as an exception, it is now thrown as a value that you can handle in the built-in language.

Hardware acceleration in the Android operating system

On operating versions Android systems 4.4.2 and higher mobile platform now uses hardware acceleration. This allowed us to increase the interface rendering speed by 1.5 – 3 times.

Applies to: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

Microsoft Dynamics 365 for Phone Express uses a form optimized for use with a phone. When editing a form, you choose which fields should appear and in what order. You can make some fields read-only, but you cannot use form scripts in CRM Forms for Express Phones.

CRM for Express phones is previous version phone application for Microsoft Dynamics 365 Latest version phone app - Microsoft Dynamics 365 for phones - provides all the same functionality as Microsoft application Dynamics 365 for tablets. For information about setting up Dynamics 365 for phones and tablets, see Set up Dynamics 365 for phones and tablets.

If you have multiple forms, you must rearrange the order of the forms and assign the appropriate security roles so that users see the forms they need to complete their tasks.

In this section

View Mobile Express form

Creating a Mobile Express Form

View Mobile Express form

The first step in setting up a mobile form is to understand what it looks like. Launch the Express Phone CRM app on your phone and sign in to your organization.

From here, find the entity that has the form you need to edit and open existing entry or create a new one.

As you can see, the form is a list of fields.

Note

Only fields that contain data are displayed.

To edit data, click the icon Change at the bottom of the form. Field labels move to provide more room for editing. All fields are now displayed. If you scroll down, you can see a list of all related entities as defined in the corresponding entity relationship definitions.

Creating a Mobile Express Form

If you need multiple mobile forms, create a new one just as you would create any other type of form. When you create multiple forms, you must set the order of the forms and the security roles for the form. Users can navigate between forms in the Express phone CRM app; they see the first form in the order of forms that their security roles allow them to see. For an example, see Multiple Forms.

Go to section Options > Settings. Select Set up the system.

Expand the node Entities and select the entity for which you want to create a new mobile form.

Expand the entity and select a node Forms.

Select Create And Mobile-Express.

If this command is not displayed, the entity is not enabled for CRM support for Express phones. For some entities this can be changed. additional information see Enable or disable entity options.

Mobile Express form names do not have to be unique, but they must be meaningful so that they can be distinguished from other Mobile Express forms in the list. This is important when setting the order of the forms.

Now you can change the shape or select Save and close to close it.More information:Edit a Mobile Express form

Setting the order of forms

From the list of forms for the entity, select Order of forms and select Mobile - Express.

In the dialog box Order of forms select a shape and use the green arrows to move the shape up or down in the shape order.

It will be convenient that each mobile form has its own meaningful name.

Select OK to close the dialog box Order of forms.

Note

You, as the bearer of the role" System Administrator" or "System Customizer", you have access to all forms. The only way to view the settings applied to Mobile Express forms in the Express Phone CRM app is to order the forms so that the form you just created is on top.

Changing the Mobile Express Form

Unlike other entity forms, you cannot create new entity relationship attributes in the Mobile Express form editor. However, you can always change the Mobile Express form in the default solution.

In the default solution, use Solution Explorer to expand Entities and select the mobile form entity you want to edit.

In the list of forms, select the form whose column Form type value present Mobile - Express.

The mobile form editor will open.

With such a simple form, the setup tasks are as follows.

Select fields to include in the form.

Selecting the location of the fields.

The decision to grant read-only access to some fields.

Publish settings upon completion. For more information, see Publishing Settings.

By default, all fields that the business or system requires are included in the form and cannot be removed. If you make a required field read-only, users won't be able to edit the field. While creating new entry a read-only field will not be displayed, but the user will still be able to save the record without this data. If you change the same record in the web or Dynamics 365 app for phones and tablets, the user will need to enter this value before saving the changes.

Rule #1: Forms must be compatible with the way the user enters their data

Make sure that form fields are not obscured by interface elements (such as the keyboard). As the user fills out the form fields, automatically move the fields up.

Rule #2: Minimize the number of input fields and the user's need to type

The longer and more complex the form looks, the less likely it is that users will want to fill out empty seats, especially on small screens. Reducing the number of input fields will make your form less busy, especially when you prompt the user a large number of information.

Make the form as simple and short as possible

But reducing the number of fields is not enough. You should also pay attention to the effort the user expends when entering data. Printing requires a high degree of interaction; there is a high probability of errors, even when entering from a full-size keyboard (especially on a touch screen).

Therefore, try to minimize the need for typing and user error.

Smart defaults

Smart defaults help users fill out all form fields faster and more accurately. For example, you can preselect a user's country of residence based on their geolocation data.

Automatic detection location will save the user time searching for a hotel room

Radio buttons for similar but mutually exclusive choices

When the user is faced with choosing from a list of options, consider using a horizontal list of tags. This allows for more efficient use available space screen.

Sliders for min/max price or budget range

Consider using sliders for fields that contain prices or budget. This way the user can move the slider to the minimum/maximum value. The slider is easy to move horizontally, and you can easily customize this action using visual cues. But remember that the numbers should not be hidden when interacting with the slider (especially when using your thumbs).

AirBnB slider to select price

Rule No. 3: Form headings must be either above the fields themselves or floating

Headings tell the user the main purpose of a field, and clear text is one of the main ways to make a UI more accessible.

Why you should never use text headings inside a field

In-field headers (or placeholders) are text that sits inside a form field that disappears as soon as the user starts entering their data.

Headings inside the field
While in-box headings look good from an aesthetic point of view, this benefit is often overrated. The main mistake is losing context. After the user clicks on the field, the inscription disappears. And, accordingly, he cannot verify that he wrote exactly what is needed.

The text inside the field is not the most best replacement visual header

Also, some users who see that something is already written in a field may think that the field is already pre-filled and they do not need to enter anything else and may ignore filling.

Why left-aligning field headers is bad for mobile devices

The main thing to consider when using left-aligned headings on a mobile device is the screen size and aspect ratio. If the title on the left is opposite the field, then with a vertical screen orientation, you will have very little space left for the field itself. This creates some difficulty in use because there is not enough space left to display what the user types. Not being able to see the text entered creates a problem for users because it prevents them from quickly noticing an input error before submitting the form.

It is very difficult to notice an error if the data is not completely visible

Top Header or Responsive Header

Form titles should be at the top of form fields so that users can see what they are filling out and how. The main advantage of placing form headers above the form is that you can stretch the form across the full width of the screen and make it large enough for data entry (for example, with a font size of 16 pixels). Additional benefit It will be possible to write clear and understandable headings (not limited to 1-2 words).

The main disadvantage of placing headers above the fields is that the entire form takes up more vertical space, which means the user has to scroll the screen. However, this is not a very serious problem - today, everyone is used to scrolling.

Alternatively, you can use responsive headers to ensure that users have filled out the field correctly. The placeholder text is displayed by default, but after tapping on the field and entering text, the placeholder text moves to the top of the field, as shown below.

Rule #4: Form field validation should happen in real time

In an ideal world, users would fill out the form necessary information and will successfully complete this task. IN real world, users often make mistakes. At the same time, users do not like the fact that after the entire process of filling out the fields, they reach the “send” button and discover that they have made a mistake. It is correct to inform the user about success/error in the field immediately after filling it. The validation message immediately informs the user that the information entered is correct. This approach allows users to fix mistakes faster and without having to wait for errors to be displayed after clicking the submit button.

If you expect specific answers to questions, you need to immediately show what needs to be entered and in what form.

String validation may also be a solution. In the example below, you can see good example, how you can correct a potential error.

Rule #5: Display the keyboard layout according to the input data

Users prefer the corresponding keyboard layout in the application. For example, when the user needs to enter a number credit card, only show number input so that the user enters numbers and not symbols. This will increase the filling speed and reduce the amount possible errors input.

You need to make sure that this opportunity implemented on the entire application, and not on its individual parts.

Rule #6: Provide useful information in context

Sometimes, there is a need to provide relevant and useful information to simplify the process for the user to complete the form. But such accompanying text should only be used where it is really needed:

When planning dates, users appreciate context such as a built-in calendar for determining the days of the week. This reduces the need to exit the app to view the calendar, reducing the risk of the user being distracted from their primary task.

People may be concerned about the security of their data, so you need to show them that their data will not be shared with third parties.

As a rule of good manners, you should not stretch your explanation to 100 characters.

Rule #7: Use a flexible format

Some tasks require the user to accurate information. But, at the same time, requiring the user to provide information in a specific form may go against the principles of good usability. If you ask the user to enter digital information (such as a phone number) into a form, be flexible and create screens that can support different formats input and display information in the most user-friendly form to prevent errors.

Don't use a fixed data entry format

Conclusion

The user may have all sorts of doubts when filling out the form, so you should try to make the process as simple as possible. All the tips described in this article can significantly improve the usability of forms.