Dynamics CRM JS 信息提示框(How Do You Create Alerts with Microsoft Dynamics CRM Javascript)

转载于:http://blog.encorebusiness.com/microsoft-dynamics-crm-javascript-how-do-you-alert/


How do you create alerts  that seems to be the question.

So often in CRM, users need to be alerted of their actions. For example, a typical alert might be a message that warns you when a user attempts to enter a text string into a numeric field.

Using the alert() method, a message is usually displayed in a pop-up window. This type of alert method does not require any in-depth response from users, who will simply acknowledge it by clicking the OK button.

Microsoft CRM Pop-Up Message 1

With Microsoft Dynamics CRM 2013 and 2015, Microsoft Dynamics CRM has continued to improve the user experience by introducing a flattened interface so to speak.

This approach focuses on removing excessive clicks and flattening out pop-up windows found in the previous version ofDynamics CRM.

With that in mind, using an alert method that requires a response from users seems to contradict the flattening approach.

At the same time, Dynamics CRM 2013 and 2015 introduced new alert methods: setFormNotification and setNotification.

These two methods display messages on the form instead of on a pop-up window, and require no clicking from users.

The Classic CRM Alert Method Versus the New Improved CRM Alert

In this article, I am going to demonstrate how the new alert methods are different from the classic one, and how they can be used.

The example here is a credit card form where credit card numbers and a CVV codes were to be validated. In the previous version of Dynamics CRM, using the classic alert() method, users are typically notified of errors one by one and users have to acknowledge them by clicking OK.

Microsoft CRM Pop-Up Message 2

Microsoft CRM Pop-Up Message 3

Of course this alert method can be slightly improved by displaying the error messages in one single alert, thus reducing the number of pop-ups and clicks to one. But still users have to make the effort clicking the OK button.

Microsoft CRM Pop-Up Message 4

Eliminating the Mouse Clicks on the Notifications in Dynamics CRM

In Dynamics CRM 2013 or 2015, mouse click(s) can be completely eliminated by using setFormNotification that displays message on the form header area. And depending on the nature of messages, they can be categorized as information, error and warning.

  • Xrm.Page.ui.setFormNotification(‘Please fix the following error(s):’, ‘INFORMATION’,);
  • Xrm.Page.ui.setFormNotification(‘Invalid Credit Card Number.’, ‘ERROR’);
  • Xrm.Page.ui.setFormNotification(‘Invalid CVV Code.’, ‘WARNING’);

Microsoft CRM Pop-Up Message 5

There is an extra line of code to clear the message from the form, simply use the following method:

  • Xrm.Page.ui.clearFormNotification()

When there are many fields on one form, users may find it difficult to locate the fields that require correction (of course, additional methods can be developed to help locate such fields, for example,setFocus or setRequiredLevel).

In such a case, I would tend to use another alert, setNotification, that displays messages next to the fields. This way, fields can be visibly located and corrected.

  • Xrm.Page.getControl(“new_creditcardnumber”).setNotification(‘Invalid Credit Card Number.’);
  • Xrm.Page.getControl(“new_cvvcode”).setNotification(‘Invalid CVV Code.’);

Microsoft CRM Pop-Up Message 6

Bear in mind that these two methods do not intercept the saving event, meaning that you can still save the records with invalid data.

So depending on the requirements, additional scripts and conditions may be required to prevent record saving if errors are not resolved.

Whichever methods you use, there are no more mouse clicks and the form looks cleaner with messages embedded on it.

At the end of the day, the new alert methods complements the flattening interface andimproves user navigation experience and efficiency.

Happy alerting!


个人备注:

清除错误信息:Xrm.Page.getControl("new_controlId").clearNotification();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可能的解决方案如下: 1. 使用JavaScript定时器(setInterval)实现轮播功能,每隔一段时间切换到下一张书架信息图片。 2. 使用CSS动画(keyframes)实现提示框信息弹出效果,并设置动画的持续时间为6秒。 3. 将需要展示的书架信息提示框信息存储在数组中,通过遍历数组实现循环轮播和弹出提示框信息。 4. 在代码中加入注释和适当的变量名,使代码更易于理解和维护。 示例代码如下: ```html <!-- HTML结构 --> <div class="carousel"> <div class="carousel-inner"> <img src="bookshelf-a.jpg"> <img src="bookshelf-b.jpg"> <img src="bookshelf-c.jpg"> </div> </div> <div class="alert"> <p>提示框信息展示</p> </div> <!-- CSS样式 --> <style> .carousel { width: 500px; height: 300px; position: relative; overflow: hidden; } .carousel-inner { width: 1500px; height: 300px; position: absolute; top: 0; left: 0; animation: slide 10s infinite; } .carousel-inner img { width: 500px; height: 300px; float: left; } @keyframes slide { 0% { left: 0; } 33.33% { left: -500px; } 66.66% { left: -1000px; } 100% { left: -1500px; } } .alert { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 100px; background-color: #fff; border: 1px solid #ccc; display: none; } .alert p { text-align: center; line-height: 100px; } .alert-show { display: block; animation: fadeIn 1s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opactiy: 1; } } </style> <!-- JavaScript代码 --> <script> var bookshelfs = ['bookshelf-a.jpg', 'bookshelf-b.jpg', 'bookshelf-c.jpg']; var alerts = ['提示框信息A', '提示框信息B', '提示框信息C']; var carousel = document.querySelector('.carousel'); var carouselInner = document.querySelector('.carousel-inner'); var alertBox = document.querySelector('.alert'); var index = 0; function showNext() { var img = document.createElement('img'); img.src = bookshelfs[index]; carouselInner.appendChild(img); carouselInner.removeChild(carouselInner.children[0]); index = (index + 1) % bookshelfs.length; alertBox.innerHTML = '<p>' + alerts[index] + '</p>'; alertBox.classList.add('alert-show'); setTimeout(function() { alertBox.classList.remove('alert-show'); }, 6000); } setInterval(showNext, 5000); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值