Kendo UI Form control
There are many options available that help achieve the desired appearance and functionality. Custom and default editors can be configured along with different orientations and layouts. The Kendo UI Form widget can be used to create and configure forms using various configuration options. Recently we came across a requirement to design a survey form. This form needs to be dynamic. During working on this assignment, we faced many challenges, and with the help of this blog, I want to share the same with you. There are several properties associated with each item- Field Field Name from data Label Label which you want to display Validation If we want to apply any validation on the field Editor Type of editor needed for the field this could be RadioGroup or CheckBoxGroup EditorOptions Editor properties can be set here With the above properties an array can be created which assign as form item. Eg. SurveyItem= [{field: “Field1”, label: “label1”, validation: {required: true}}, {field: “Field2”, label: “label2”}, {field: “Field3”, label: “label3”}] 1. Multiple controls on one form – By pushing each element in an array and set the array as item property of the form. var SurveyItem=[] angular.forEach(SurQuestion, function (item, index) { var objQuestion= {}; var fld = item.SurveyID; objQuestion.Id = item.SurveyID; objQuestion.field = fld; objQuestion.label = item.SurveyQuestion; SurveyItem.push(objQuestion); }) $("#form").kendoForm({ orientation: "vertical", items: SurveyItem, }); 2. Multiple forms on one page- To accommodate multiple forms on one page the json format of Items should be like below- FormArray=[{ type: "group", label: "Form1", items: SurveyItem },{ type: "group", label: "Form2", items: SurveyItem2 ] //Now assign this FormArray to items property of the form $("#form").kendoForm({ orientation: "vertical", items: FormArray, }); 3. Different layouts on different form groups- There is no out-of-the-box setting available for this, but we can achieve this using CSS var form = $("#form").getKendoForm(); var groups = form.wrapper.find(".k-form-fieldset"); groups.first().addClass("k-form-horizontal"); 4. Add a label on the form without control Sometimes, we only want to show some text on the form without any control. There is not out of box property associated with this. With the help of CSS, we can achieve this. { field: "Custom", label: "Additional text", editor: function(container, options) { container.append($("<input type=’text’ class=’myLabel’ />")); } }, //Then, you could hide all the elements with the respective class. $(‘#form .myLabel’).parent().hide() //Then add styles on the label $(‘#form .myLabel’).parent().siblings(‘label’).addClass(‘labelStyle’) //To hide the editor, you could simply return an empty string as a custom editor. editor: function(container, options) { container.append(”); } Kendo UI form is new and robust control of Kendo UI. There is not much out-of-the-box customization available, but creating whole dynamic page forms is quite helpful. Related: https://advaiya.com/multiselect-people-picker-using-kendo-ui-with-a-large-dataset/ Shruti Vyas Shruti is a technical consultant at Advaiya. With over nine years of experience in the IT industry, Shruti has a passion for data and an ability to understand and analyze it effectively. She shares her insight on various topics such as custom application development, project server customization, client-side scripting etc.
Accessing Angular jQuery method in VBA
To perform custom operations with any Office365 technology, we make use of jQuery/JavaScript. In one of our client’s functionalities, we came across a need to call the jQuery method using VBA (Visual basic for applications) macro. VBA is a programming language that helps us in custom operations for various Microsoft Office tools. We have implemented it for project professional. A SharePoint online page was loaded in project professional VBA form using a web browser control. On this SharePoint page, we have used Angular JS + jQuery to perform our custom operation. For displaying some data on the page, we need to fetch some data from project professionals onto our custom page. To do so, we need to call a jQuery method using VBA. As we have used Angular JS, we have to call the method of the controller class after that. I will share with you how we carry out this operation. In order to call a jQuery method, we have to keep in mind that the web browser controller should be loaded completely else; while calling the method from VBA, it will not find the method and will throw an exception. Let’s look at the code snippets to carry out the operations: In VBA, we have to use the below code: Sub CallJqueryMethod Dim currentWindow As Object Dim selectedValues As String Set currentWindow = frm1.WebBrowser1.Document.parentWindow selectedValues = frm1. ID currentWindow.execScript Code:=”ShowFilterData(‘” + selectedValues + “‘)” End Sub Here, we have to get the parent window object of the web browser control using code line frm1.WebBrowser1.Document.parentWindow. We call “ShowFilterData” a parametric function, a jQuery method on our custom page using code line currentWindow.execScript Code:=”ShowFilterData(‘” + selectedValues + “‘)” As we have used Angular js so will be calling a method of our controller using the below code snippet from the method, which will be called from VBA //On Html page under Script tag <script type=”text/javascript”> function ShowFilterData (data) { angular. element(document.getElementById(‘ContId’)).scope().GetData(data); } </script> //On Angular controller js the GetData method is defined as $scope. GetData = function (data) { //Custom logic } On the html page under the script tag, we have defined the method ShowFilterData that will be called from VBA. An id should be assigned to the div where we have attached our controller using the ng-controller directive. So, here we have given the id: ContId as below GetData is a function that is defined under the controller.js. So, we have seen how we can easily call an angular js method using VBA. I hope you find it helpful! Supriya Khamesra Supriya is currently working as a Senior Consultant with Advaiya, and has more than 10 years of experience in applications development, and responsible for Enterprise Project Server and Project Online and BI solutions. Microsoft Certified Professional in EPM, Supriya has been working on multiple technologies/platforms like Azure, .Net,Office365,Project Server,Project Online,SSRS,CSOM,JSOM,Kendo UI,JavaScript, SQL Server among others.
Microsoft Dynamics 365 – Getting started with ribbon workbench
While using Dynamics 365 CRM, have you ever come across a situation where you are re-entering the same data on different locations or forms? If yes, then you are in the right place; let’s get your problem solved. In our blog, we will get you through the detailed process by which you can pass parameters & data from one form to another form using a single button click, with the addition of JavaScript on the ribbon workbench button’s command. Let’s look at a quick example of how you can do so. Follow the steps below: Open ribbon workbench. Select the solution that contains the source entity. 3. Add a new command of type Actions. Under that, add JavaScript Action. 4. Add a JavaScript action and call OpenDestinationEntityForm function, which is available in existing JS web resources 5.Now, add the ribbon button and fill in the necessary details. Also, link the command to the button. 6. Publish the changes. 7.Once done, navigate to the account and click the button to view the alert. Congratulations, you have successfully passed parameters from one form to another form using the ribbon button with customized ribbon workbench. If you are planning to customize Dynamics CRM or create custom workflows, business rules, plug-ins, ribbon workbench customization, etc., get in touch with our team of experts or add your comments below in case of query.
Key steps for configuring Azure app gateway for multi‑site setup
In a scenario where you want your website to be publicly accessible by all users, in that case, you cannot apply IP restriction to your website. Such Azure App Services (Web Apps) are publicly exposed to the Internet by default, accessible with their custom domain or *.azurewebsites.net URL, making it vulnerable to hackers and spammers, including Distributed Denial of Service (DDoS) attacks. An Application Gateway Web Application Firewall (WAF) tier (prevent mode) can help protect against Layer 7 (HTTP/HTTPS/WebSocket) attacks. Application Gateway is an HTTP load balancer that allows you to manage traffic to your web apps. As it operates at layer 7 (application layer), it can scan incoming requests using OWASP common vulnerabilities rule set. Many a time, it has observed that users face difficulty in configuring their apps services with Application Gateway, especially in a multi-site scenario or app services having multiple custom domains. How to configure application gateway with Azure app service In this article, I ‘will be providing some key points to consider when configuring the Application Gateway with Azure App Service multi-site scenario. App Gateway Configuration To prohibit the application gateway to reach your app service, ensure that Network Security Group (NSG) is not applied or blocking your Firewall Subnet. Backend Pool Configuration Ensure that you associate your app service in the target. To do so, select “App Services” as Target Type and choose your app service name from the Target bar drop-down. Note: If you have multiple custom domains in a single app service, one app service as a backend pool will suffice your need. In case you have multiple app services, each with a custom domain, then you need to associate each of your app services by choosing them from the Target drop-down. Configuring Custom Probe You can create a common health probe for all the websites by ensuring that you have checked the “Pick Hostname from backend HTTP settings” so that the probe is picking from “HTTP settings,” which further picks the hostname defined in the app service. That is how it identifies the custom domain rather than just the app service name. You may optionally use matching probe conditions with 200-399 HTTP status response code. Configuring Listener When creating a listener, create a multi-site listener. Ensure that you provide your custom domain of the app service in the Hostname field. Choose HTTP or HTTPS based on your website requirement. If your website requires HTTPS, then a PFX certificate for the website is required. HTTP settings configuration Create an HTTP setting. Then associate the custom probe and save the HTTP settings again. Make sure that “Use for App Service” is unchecked Note: You will need to upload .CER certificate if your website requires HTTPS. Next, ensure that you keep the “Pick hostname from backend address” box unchecked and provide the hostname of the website in the “Override hostname” field. This action is required when you have multiple custom domains on your website so that Application Gateway understands which custom domain it must pick. Note: The Request Timeout should be greater than the app service request time. This will allow enough time for the app service to respond before the request times out in the Application Gateway and will help prevent in 502 Server error. Configuring rule You can create a basic rule and then associate the Listener, Backend pool, and HTTP setting to it. Configure redirection (required in case of HTTPS) After you have created all the above settings, you will need to configure internal redirection if your website is accessible on HTTPS. For e.g., http://mywebsite.contoso.com will not be redirected automatically to https://mywebsite.contoso.com. To do so, you will need to create two things: 1.Create another multi-site listener on port 80. 2.Create another rule and associate it with the listener on port 80. More Interesting Read Azure Active Directory Authentication in .Net application How to convert FAQ into a Bot using Azure Bot Service DNS configuration To authenticate your app service, you must first add a CNAME record pointing to the app service URL. Example: mysite.azurewebsites.net Then bind your website with an SSL certificate. After you have configured the Application Gateway, Listeners, HTTP settings, and health probe look for the Backend Health status. It should be green. Then replace the CNAME record pointing to Application Gateway DNS instead of the app service. You can find the Application Gateway DNS URL from the Overview section in “Frontend Public IP Address.” Note: If there are multiple custom domains/websites, the configuration steps mentioned above need to be followed for each website/domain. Get the cloud services required to develop, manage, and deploy applications on a vast global network with the Microsoft Azure cloud computing platform Advaiya provide end-to-end services on AWS for cloud solutions. In case of any query, get in touch with our Azure experts or add your comments below.
5 emerging field service trends to look for in 2019
2018 was an incredibly exciting year for the technology industry which has seen multiple initiatives and achievements. But until now, we have spoken theoretically about the real and useful applications of these innovative technologies in our work and personal lives. This has started to change! 2019 promises to be another significant year as technology has now integrated with our lives, and more and more businesses are adopting it to get the best out of it. Technologies like artificial intelligence, machine learning, cognitive services, and analytics, just to name a few – are becoming mainstream across the industries and their adoption is growing steadily. These technologies will be an integral part of how we work, communicate and interact with people around us, and deliver services in the next 3-5 years. Technology is now fundamental for every industry — from hiring good candidates to delivering better and faster services to the customers. So, before we shape our business strategies for the year, it is highly essential to equip ourselves with the latest technology trends to know what is possible and how our business can reap benefits. Let’s discuss five emerging field service trends that will gain prominence in 2019 and beyond. 1. Leveraging automation Companies are focusing on modernizing their field service journey more than ever, and automation is one of the essential drivers that helps improve productivity and provide the ability to serve customers in a better way. With the advent of cloud-based field service management software, it has become more accessible than ever to get access to the useful information and manage everything from checking the technician availability to scheduling and confirming bookings in calendar apps and email, to automated invoicing and billing. 2. IoT-driven predictive maintenance IoT has been a talking point for a couple of years, and we don’t expect this to change. Smart devices and appliances are connected to the internet today which means these devices will let the companies know in advance if an asset is broken, a part needs to be replaced, or maintenance is required. These predictive insights are transforming field services from reactive to proactive repairs and benefitting both customers and suppliers – identify and fix problems before customers raise, solve issues before failure, diagnose underperforming products and react swiftly. 3. Data-driven delivery The field service industry’s shift from corrective to predictive maintenance highlights the importance of how companies get data, make sense of it, and act on it to set them apart from the competition. To attain operational excellence and maximize service quality, it is essential to gain real-time visibility into metrics like customer acquisition cost, jobs per team member, daily fuel usage, travel time, cost per job, and more. In a recent study, Aberdeen Group found that best-in-class field service organizations that adopt analytics realize increase in service profits by 18%, customer retention rates by 42% and SLA performance by 44%. 4. The growth of artificial intelligence As IoT offers field-service representatives the ability to talk to machines and quickly identify issues; AI is what makes them aware of problems before they even appear. Many companies in the field services industry have started experimenting with AI-based strategies to train their technicians, prioritize work order requests, improve levels of customer experience, dispatch the right technician to the right job, keep track of their workers’ performance, and manage inventory without much delay. AI, in the form of chatbots, converse and guide many of the customer requests efficiently that allow operators to focus on more complex customer service cases and other important chores. 5. AR and VR transformations The field services industry has a lot to gain by integrating the innovative technologies like AR and VR into their business strategy. AR and VR enabled devices increases the technician’s efficiency, service delivery rate, and customer satisfaction in many ways like providing instant access to the entire knowledge base, getting instant access to maintenance history, helping in discovering the right equipment in order to carry out maintenance, identifying the useful information about the device which is about to repair, and much more. How are you preparing for these upcoming trends? We look forward to discussing field service management ideas, and its implementation with you. Want information about our field service management solutions? Click here
The comprehensive help desk application you were looking for
One of the most significant problems faced by companies, IT departments, production plants, and facility management departments is lodging of complaints in their daily operational activities. Are you looking for a software or application which can take care of these problems? Are you looking for a solution which can automate the process of raising tickets? If you are, then you must know about Helpdesk application for O365 which can automate the process of generating and managing tickets. Here are some features of Help desk: Ticket generation through an email: Technology is growing exponentially, and there is automation in every sector. People do not have time to place a complaint manually. Help desk system on O365 can play a crucial role in this automation where one can send an email to helpdesk account and ticket will be generated automatically. Automatic assignment of the ticket to the technician based on the Business rule: Assignment of the ticket to the concerned person manually will lead to a waste of time. With Help desk, it will be possible to allot the ticket to the concerned person based on their role. SLA violation/ escalation of the ticket if tickets are not resolved/responded on time: There are many tickets which may not be responded and resolved on time due to various reasons. Manager or HOD has to be notified about this delay so that they can take further action Help desk SLA violation system will automatically check if tickets are not responded or resolved on time and then a notification will be sent to the manager or HOD. Work log assignment: It is essential for the manager to know the distribution of resource and with Help desk, team member/technician of the assigned ticket can log their work hours(duration). The manager can also view the number of tickets raised during a period. Task delegation: Many a time, it happens that technician is very busy with some task and there is another high priority task that needs to be completed, or he may require some help from sub technician. Helpdesk system provides a mechanism where a technician can manage his/her assigned task by adding sub-technician or helper to accomplish the given task. They can also add worklog hours to each task. Ticket approval: Some tickets are created which may require approval from higher authority. Within the Help desk system, the approver can manage and validate the tickets. Ticket detailed history: A detailed history of each ticket is maintained in Helpdesk which can be referred at any point of time. It is also possible to generate reports using the ticket lifecycle feature. Convert the ticket to change management: There are some complicated tickets which need proper planning and approval process. These types of tickets can be converted to change management process. Help desk system is a complete automation solution for managing and solving customer tickets with bare minimum efforts. This application helps in better customer satisfaction and an increase in productivity of technician.
5 customer experiences that can be enhanced with Chatbots
What was the last time you had a chat with a customer service agent where you might be complaining about a product you had received? There is a possibility that the agent you were speaking to was not a person but a talking bot. Chatbots have begun to revamp the customer service industry. As per Gartner predictions, by the year 2020 more than 85% of customer support will be handled by machines. Chatbots save money and effort by automating customer support. Lately, the evolution of Artificial Intelligence is at its peak, and Chatbots are a part of this huge AI wave. Today, messaging apps like Facebook Messenger, WhatsApp, Slack, etc., are used by almost everyone. With the widespread of messengers, chatbots which can converse like human beings are becoming increasingly popular. Here are some features of bots which make them hard to ignore. High response rate: A lot of messages received on a company’s website and social media channels go unanswered. But, chatbots ensure 100% response rate. Good response rates can help a company win customer trust. Better customer service support: Some people would want to ask about the status of their order after their office hours. Chatbots are available 24×7 to answer the queries of users. This eliminates the waiting time and enhances customer service of a company. Understand customer behavior: Chatbots use data and trends and adjust the responses accordingly. This can help a company get insights into its consumer behavior. The company can provide discounts on the products based on market demand. Some chatbots can assist users in finding the right products or services. Processing multiple requests: Chatbots can handle multiple queries at a time with precision. A live agent can only handle 2-3 communication at a time, while chatbots have the capacity to handle multiple queries or requests. With chatbots, volume is never an issue. Increased engagement opportunities: When we open a website, we often see a friendly greeting at the bottom corner. It is becoming important for every business to have this tool to stay in the competition. Chatbots are a cost-effective and easily adaptable tool to engage with the users. A highly engaged customer is likely to reach the bottom of sales funnel and chatbot has the potential to engage with the audience proactively. Thus, bots have gained prominence in the customer service segment. They limit the possibility of human errors and are available to address user issues 24X7. This technology might still take time in creating an ultimate seamless experience for customers, but this is the future of customer service.
Perform cloud load testing with Visual Studio and VSTS
When we develop any website or app, it is required to check its performance before launching it to the production or live environment. Performance load testing checks the website ability to perform under anticipated user loads. The main objective of load testing is to identify performance bottlenecks before the application goes live. With this, we can find out the performance issues or problems before the end user faces it and report that to us. Pre-requisites To perform load testing we need to have the following: Visual Studio 2017 Enterprise edition, it can be downloaded here, if not already installed. A VSTS account, we can create our account here, if the account is not already created. Any access level will work to perform/run load test using Visual Studio Enterprise. Connecting to VSTS To create and run the load test in a cloud, connect Visual Studio to a VSTS account Go to Team Explorer and click Manage Connection and then Connect to a project Figure 1 Connecting to VSTS – Team Explorer The Manage connection popup will display the list of repositories which have been already added to the visual studio previously. We can add our account by clicking Add an account option and providing credentials. Now it will connect to our VSTS account and will display a list of VSTS repositories associated with that account. Select the VSTS account repository which is to be used from the list and select the team project, then click Connect. Figure 2 Connecting to VSTS – Add account and select team project Now the Visual studio is connected to the VSTS account, we can start creating the load test project Creating a load test project In Visual Studio create a new project using “Web performance and Load test project” template placed inside Test projects templates as below Figure 3 Create Load test project If we cannot find this template in Visual Studio, it means it is not installed. In this case, we need to install the web performance test template project. Follow below steps to install this Run the Visual Studio 2017 Installer Switch to Individual Component tab and open Debugging and testing section Check “Web performance and load testing tools” option Now we can find the test template in Visual Studio and can create the project. Open the file with the extension “. webtest” (it will be opened automatically when a project is created) Right click on WebTest à click Add Request. It will add a request with localhost as shown in the image below: Figure 4 Add request in the web test Figure 5 Web test request URL We can replace the localhost URL with our actual website URL in the Request properties window as below Figure 6 Request properties We can also add Validation rules for the web test, right-click WebTest project and then click Add Validation Rule Specify the rules and properties in the next screen and click OK Figure 8 Add Validation rule in web test -2 We can see the web test as below Figure 9 Webtest Now Right click the project and Add a Load test Figure 10 Add Load test in the project It will open the New load test wizard to specify the load test settings, we can select the type of load test whether it will be cloud-based or On-premise load test and click Next to specify the other settings. Figure 11 Set load test type We can select the Azure data center location from where the load will be generated. It should be selected considering the user’s location, we can select the location which is closer to the users of the website and click Next Figure 12 Set load test location We can specify the run settings like test duration or iterations and click Next Figure 13 Set test duration and Iteration It contains a list of scenarios which can be added to the load test like Load pattern, Browser mix or test mix and click Next Figure 14 Set test load pattern On this screen we can specify the test mix like how the test will be executed, based on total number of tests or Virtual users etc. and click Next Figure 15 Set test model behavior We can add the tests here which are previously created, the tests will have the web request URL. Select the test Move it to the selected tests area Click OK Figure 16 Add web tests to the test We can specify browsers to test the performance, we can add multiple browsers and can set the distribution ratio for the load test with different browsers. Figure 17 Add browsers to perform the test with Click Finish and it will create the Load test, we can check and edit the test properties from the properties window as below Figure 18 Load test Run the load test Now as we have created the load test, so we can run the load test to test the website performance with the parameters specified at the time of load test creation like duration, a number of users, browser etc. Right-click on the Run setting and click Run Load Test, it will run in the Cloud using VSTS Figure 19 Run load test It will build the solution and will start initializing the load test as below. Figure 20 Load test In-Progress It shows the progress and performance of the Graph and details tab. We can check the website performance when the test is running, we can also check for errors, warnings, and information about the test. Figure 21 Load test showing performance graph It displays Completed status when the test is 100% done. It shows the Performance graph and other details in the test result, we can also Download the test report or can open the Web report in VSTS portal to view the test results. Figure 22 Load test with
Everything about Microsoft QnA Maker
FAQ pages on any site are considered as a trustier and quick way to find out the information available on the website instead of navigating through all the web pages. Many times, to find specific information quickly on a lengthy and nested FAQs is time-consuming and tedious. To make it more specific and exciting, companies are always reorganizing and grouping questions in a better way but still it does not provide an engaging user experience. In this post, I am going to share how you can build smarter and more intuitive and engaging experiences for FAQs by converting FAQ into FAQ chatbot. One of the basic requirements to develop your chatbot is knowledge base (Questions and Answers) which already exist in the form of FAQ pages or URLs or Documents. To convert these FAQs into chatbot, there is an interesting Q & A maker service provided by Microsoft Bot Framework using Microsoft Cognitive Services. What’s interesting about this service is It is an easy-to-use, free of cost, REST API- and web-based service that trains AI to respond to users’ questions in a more natural, conversational way. The important thing is without retyping all content; we can build, train and publish a simple question and answer bot based on FAQ URLs, structured documents or editorial content in minutes. To build the knowledge base, it has 1. Auto-extraction ability to import questions and answer from your existing FAQ pages. FAQ pages can be: Plain FAQ pages: Questions are immediately followed by answers. FAQ pages with section links: Questions are aggregated and linked to answers on the same page. FAQ pages with linked answers: Questions are aggregated and linked to answers on a different page. 2. Ability to import Q&A pairs from separate file having following formats for ingestion: .tsv: In this format, questions and answers are in the format Question + Tab + Answer. .txt, .docx, .pdf, .xlsx: In this format, questions and answers contained as regular FAQ content–that is, a sequence of questions and answers. Note: Auto-extraction works best on FAQ pages that have a clear Question and Answer structure and semantics such as questions always ends with “?” and contain interrogative words such as “How,” “why,” and “what.” 3. Option to add a new question and answer pairs manually as well The testing environment in QnA Maker allows for trying out and previewing how the bot replies to any one question. It supports all languages; as the QnA Maker service ingests and matches data in UTF-16, encoding thus any language should work as is. In case you want to use the content from multiple languages, please create a separate QnA service for each language. Available as a free premium tier and support 1,000 calls per minute and 500,000 calls per month. To use Microsoft QnA Maker service, you need a Microsoft Account. You will receive a unique pair of subscription keys which are used to track your usage of the service. These keys will be part of every request. Limitation: Currently, you can create knowledge base up to 20 MB. Current transaction limits are ten calls per minute and 10,000 calls per month. If you require higher limits, a free premium tier is available with limits of 1,000 calls per minute and 500,000 calls per month. In knowledge base, multimedia content such as images and videos are not supported at this time. Below are the steps to build knowledge base using QnA maker service: Create a new QnA service. Indicate Question and Answers (Q&A) source using the URLs, or by uploading files, or by entering manually. Update your knowledge base as per the need for correct Q&A mappings. Train your knowledge base: The train feature of QnA Maker service allows you to check the correctness and relevance of the responses. With this feature, you can quickly correct the responses and re-train the knowledge base as per need. Finally, when you are satisfied with the knowledge base, you need to publish the knowledge base as service. QnA Maker also allows you to share your knowledge base with other users, so they can also contribute to it as well. In the next article, I will demonstrate step-by-step instructions to use QnA Maker service to create an effective knowledge base from your FAQ and setup a QnA Maker bot to use it.