Support Portal ContactGet in touch

Using Graphical Bootstrap Form-Controls

   Words by CRM Consultancy

   on 21/04/2016 17:00:00

imageBootstrap provides us with a common look and feel that we can apply to our Portals and Custom Screens that work with Dynamics CRM.

 

One the elements that Bootstrap (and various Bootstrap Themes such as AdminLTE) provides for us is styled Form-Controls and variants for Success/Error/Info based on the user’s input to a screen.

 

We can see examples of this here: https://almsaeedstudio.com/themes/AdminLTE/pages/forms/general.html

 

So if we consider a standard Form Control on our Page:

 

Mark-up

<div class="col-md-6">

    <label>Offer Amount</label>

    <crmcs:CRMTextbox ID="SaleForm_salePrice" CRMField="cw_saleprice" runat="server" PlaceHolder="Offer Amount" />

</div>

User Experience

clip_image001[4]

 

We can look at customising this basic appearance by adding mark-up to present this control more graphically:

 

Mark-up

<div class="input-group has-success">

    <span class="input-group-addon has-success">

        <i class="fa fa-check"></i>

    </span>

    <crmcs:CRMTextbox ID="SaleForm_salePrice" CRMField="cw_saleprice" runat="server" PlaceHolder="Offer Amount" />

</div>

User Experience

clip_image002[6]

 

This is controlled by the following Classes in the Bootstrap Framework:

 

                input-group

                                Defines the contents of the DIV Tag as a single Control

                has-success

                                Applies the green formatting to the Control                       

                input-group-addon

                                Defines the add-on to the main Textbox

                fa

                                Sets the area for the icon

                fa-check

                                Defines which icon we should use – in this case, the tick.

               

This then generates our ‘success’ control.  We can do similar for a fail or ‘has-error’ control:

 

Mark-up

<div class="input-group has-error">

    <span class="input-group-addon has-error">

        <i class="fa fa-times"></i>

    </span>

    <crmcs:CRMTextbox ID="SaleForm_salePrice" CRMField="cw_saleprice" runat="server" PlaceHolder="Offer Amount" />

</div>

User Experience

clip_image003[4]

 

This concept of labelling fields as Pass or Fail can be quite useful, particularly for reporting on SLAs or Milestones in the Sale Progression.

 

So to help our CRM and Web Projects make use of this formatting, this has been built directly into the CRMTextbox Control within our Framework – such that we can toggle the DisplayFormat Parameter as way of asking our Framework to output the field with either the Success or Fail Formatting:

 

Mark-up – using Framework

<crmcs:CRMTextbox ID="SaleForm_salePrice" CRMField="cw_saleprice" DisplayFormat="TickCross" runat="server" PlaceHolder="Offer Amount" />

User Experience

clip_image002[7]

 

Setting the DisplayFormat to ‘TickCross’ will then implement the following:

-          If the field is populated with a value in CRM, then the Tick Format will be shown.

-          If the field is blank and so not populated with a value in CRM, then the Cross Format will be shown.

This allows us to present certain Fields in the Sale Progression as visibility Completed or Not Completed yet for that Sale:

 

clip_image004[4]

This gives a better User Experience for this particular type of ‘have-we-completed-X-yet’ field.

Share this Article

Search Articles

Filter Articles

CRM Tech DocMan

Recent Articles

CRMCS Quick Start Guide: How To Produce a Microsoft Teams Live Event Dynamics 365 Marketing: Lead Scoring and Sales Acceptance Designing and Developing Microsoft Power Apps Portals Thank You for Attending CRMCS’ Webinar - Achieving B2B sales excellence with Dynamics 365 & Microsoft Teams Thank You for Attending Our Webinar - Achieving B2B sales excellence with Dynamics 365 & Microsoft Teams Webinar: Discover How CRMCS Have United Dynamics 365, SharePoint and Microsoft Teams To Create Sales Excellence Ignite your workflow by adding DocDrive365 to Office 365 The CRMCS guide to everything you need to know about integrating Teams with Dynamics 365 Saving Time By Keeping Documents In One Place TDE Database Encryption with On Premise Dynamics The Key to Successful Compliance in 2020 Part 2: Let’s get GDPR Compliant with Microsoft Power Automate Top 3 Essential Tips for Remote Working Dynamics 365 Marketing: Top 5 Best Features Dynamics Day in the Life - Puma Investments Can you use Teams to amplify collaboration in Dynamics? Part 1: Using a Scheduled Power Automate to Trigger Expiry Date Reminders The secrets of successful document collaboration in Dynamics CRMCS launches new AppSource approved DocDrive365 Dynamics Day in the Life - Moneypenny Release Management Add the App to Dynamics DocDrive365 Security: Day One - Getting Started with Dynamics to SharePoint Permissions Building a New Scheduled Process using Flow
  • "Paul has made a real difference to how my team of 24 people record and store valuable customer data and sales opportunities. Highly recommended."

    James, Operations Director

  • "Understanding your business allows us to advise when to implement aspects of CRM and, likewise, when not to."

    Paul McQuillan, Managing Director

  • "Dynamics 365 and CRMCS have made a real lasting difference to our business, allowing us to replace older systems that were holding back our performance."

    Grahame, Chief Operating Officer

  • "James worked well with us to help connect CRM with Outlook and relate how this might benefit our team using CRM for Property Care."

    Natalie, Property Care Supervisor

  • "Matt was really good with helping us run User Testing on the new Compliance Module of our CRM System."

    Tom, Compliance Administrator

Prefer to go old-school?

Write to us using the below addresses.

Head Office
CRM Consultancy
61 Oxford Street
Manchester
M1 6EQ

London Office
CRM Consultancy London
Grosvenor Avenue
London

Content © CRM Consultancy.