The Microsoft Dynamics CRM Blog
News and views from the Microsoft Dynamics CRM Team

Fluid Forms

Fluid Forms

  • Comments 0

With December 2012 Update for Microsoft Dynamics CRM , we were able to deliver a much more modern UI to our customers. However there is a problem. This modern UI looks great on one specific resolution and then doesn’t scale well at all for any other resolution. There were also many limitations that made the form look odd in certain places. Many things just start getting cut off like header tiles, form title. Content doesn’t reflow and scroll bar starts showing up after certain resolution.  

All these limitations forces available space not to be used efficiently and makes user experience a bit annoying. 

Now with Orion or Microsoft Dynamic CRM 2013, we make the user experience better with Responsive Web Design to handle most of the resize problems. This approach provides an optimal viewing experience — easy reading with a minimum of resizing and scrolling across a wide range of devices (ranges from Tablet devices to Desktop computer monitors). This can be accomplished via templates in form editor.

This is how the form looks at different resolutions or across devices (ranges from Tablets to Desktop Computers) –  

Screen resolution of 1280 

Figure 2 : Opportunity form with 3-column layout at screen resolution of 1280 (Desktop monitor or Computer) 

Functionality:  

     Content shrinks proportionally to consume the available width efficiently without causing any overlap. 

Screen resolution of 1024

Figure 3 : Opportunity form switches to 2-column at screen resolution of 1024 or tablet devices (IPad, Nexus, Surface) in Landscape mode 

People will see following changes -  

  • Header tiles flows to the bottom-left of Opportunity title and enables user to view all the information without being cut-off.
  • 3rd Column (Stakeholders Sub-grid) reflows to the bottom of 1st  one and expands to give user better viewing experience.
  • 1st (Opportunity Primary Details) and 2nd Column (Activities) expands to divide the available screen resolution equally.
  • No Horizontal scroll bar  

Screen resolution of 768

Figure 4 : Opportunity form switches to 1-column at screen resolution of 768 or tablet devices (IPad, Nexus, Surface) in Portrait mode 

User will see following changes – 

  • 2nd Column (Activities) reflows to the bottom of 1st  one and expands to give user better viewing experience.
  • This means all the three columns (w.r.t screen resolution of 1280) are in one line and makes information viewing easier for people. 

More information:

Help: Create or edit the main form for an entity

Customization Guide:

 

Leave a Comment
  • Please add 3 and 1 and type the answer here:
  • Post