March 25, 2021

Restore a Power Apps - Canvas App created within Microsoft Teams

Introduction

We recently implemented a Power Apps - Canvas App which was created and managed within Microsoft Teams for Construction and Engineering Company based out of Washington, United States. One of the requirements arose was to restore the previous version of the app as the current version of the app was having some bugs which lead to undesired behavior. So, we restored the previous version of the canvas app within the Microsoft Teams.

In this blog, we will explore the step-by-step process to follow to restore a canvas app that is created within the Microsoft Teams.

Steps to follow

Step 1: From the left pane in Microsoft Teams, select "Power Apps" and then click on the "Build" tab.



Step 2: Select the team in which you had created the app and wanted to restore that app. After that, click on the "See all" link inside the "Built by this team" tab.



Step 3: Select "Apps" and then click on "three dots (…)" which is beside your app’s name of which you want to restore. Select "Details" from the options.



Step 4: Select "Versions" from the "App Details" screen and select the version that you want to restore. After that, click on "three dots" in the selected version of the app and select the "Restore" option from the options.





Step 5: When you click on the "Restore" option, it will create a new version of the app which will become the latest version of the app. We can make the required changes as needed to the restored version and to use this latest version we have to publish it so that it can be available for the other users.

Select the "three dots" of the latest version and click on the "Publish this version".



Step 6: Select "Publish this version" to confirm that you want to publish that version to make it live.



Note: You can restore one of the versions of your App which were created in the last six months.

Conclusion:

These are all the necessary steps you need to follow to restore the Canvas app which is created inside the Microsoft Teams. Hope this helps!

If you have any questions you can reach out our SharePoint Consulting team here.

[Nintex Form]: How to setup auto populate value in dropdown

INTRODUCTION

We need to implement autocomplete dropdown feature using Nintex form in SharePoint 2019 custom list for hospitality company based out Saudi Arabia. Client has already acquired Nintex forms license for customizing SharePoint forms and wanted to set autocomplete dropdown feature for department field in Nintex form.

PROBLEM

Nintex form does not provide OOTB autocomplete dropdown control which can be utilized to meet client requirement. So, we thought of an alternate approach by setting "Department" field as lookup column in SharePoint custom list and set that column as dropdown in Nintex form, but the issue is lookup column also does not have auto suggest functionality.

SOLUTION

Nintex form provides an option to inject custom jQuery in Nintex forms. So, finally, we have decided to use custom jQuery Auto-complete combo box in Nintex form to achieve autocomplete dropdown functionality.

In the Nintex form, we need to set label control and inside that rendering the jQuery auto-complete combo box component programmatically. Also, we've implemented Ajax call to get list of department values from SharePoint list and binds to jQuery combo box component. To store selected values from combo box to SharePoint list, we've used other single line of text field in the Nintex form and set the selected values from the control to this field on save button click. We've hide the control using jQuery when form loads.

PROCESS

Step 1: Open Nintex Forms

Go to the list where you want to integrate this Nintex form, click on the list and select Nintex Forms.

Here, we have SharePoint custom list having column named Department with single line of text type.



Step 2: Setup Default Department.

You can see the default form already setup here; and we need to hide the department column that was already set with single line of text. It can be implemented using custom jQuery.

To open setting of this control, Select and open control setting from the top left side of the page.


It will open the control setting page, expand the formatting tab, Here, we need to add "formDepartmentField" class for both Control CSS class and CSS class.


Step 3: Setup Dropdown.

Now, We need to set our dropdown control in the label field. And to do that, we need to first add a label control in the Nintex form from left side panel.


Double click on the label OR click on Control setting, will open Control Settings - Label window.



Expand the Formatting tab, In CSS class, add “autoChoiceBox” class for custom dropdown and 

nf-form-input nf-section” class to apply CSS. Click on Save button.


Step 4: Setup Submit button.

Open submit button control setting and expand the Advance tab.


Now, on Client click, we have to write code for validation and store value from department field to SharePoint list. It can be achieved using custom jQuery.

Add below code in the Client click field.


 NWF$(document).ready(function () {  
 if (NWF$('.custom-combobox-input').val() == "") {  
 NWF$('.custom-combobox-input').addClass('nf-error-highlight');  
 } else {  
 NWF$('.custom-combobox-input').removeClass('nf-error-highlight');  
 }  
 NWF$(NWF$(".formDepartmentField").find('input')[0]).val($('.custom-combobox-input').val());  
 });  

The code must be written only on submit button client click event.

Step 5: Apply jQuery and Give code reference path.

Click on the form setting to apply CSS and custom jQuery code.


Expand Advanced tab, in Custom JavaScript Include section, set reference URLs of JS files containing our custom code, Here, we have stored these files in a Style library.

For Autocomplete dropdown, we need to add one jQuery plug-in called jQuery UI (1-12-1)

Reference URL for jQuery UI:- http://jqueryui.com/resources/download/jquery-ui-1.12.1.zip

We need to download it from the jQuery site and uploaded it to Style library. The path of this file must be added prior to our custom JS file link added in "Custom JavaScript Includes section as shown above.

Add below code for autocomplete dropdown in the script file - INF_Autocomplete.js and Save the changes.

 NWF$(document).ready(function () {  
   NWF$("#s4-ribbonrow").attr("style", "display:none !important;");  
 });  
 var userDep = "";  
 NWF.FormFiller.Events.RegisterAfterReady(function () {  
   var isNewMode = document.location.pathname.indexOf("/NewForm.aspx") >-1;  
   var isDisplayMode = document.location.pathname.indexOf("/DisplayForm.aspx") >-1;  
   NWF$('.nameOfUser').change(function () {  
     var userName = NWF$("[data-val]").attr("data-val");  
     if (userName) {  
       var userName2 = userName.slice(7);  
       var userName1 = userName2.replace("\\", "\\\\");  
       var valToSet = onUserNameChange(userName2);  
 setValToDropdown(valToSet);  
       NWF$('.custom-combobox-input').val(valToSet);  
     }  
   });  
 userDep = getUserDepartment();  
   var htmlForCombo = '<div class="ui-widget"><select id="combobox"><option value>Select one...</option></select></div>';  
   NWF$('.autoChoiceBox').html(htmlForCombo);  
   var allDep = getDepartmentData();  
   var departmentArray = [];  
 allDep.forEach(function (item, index) {  
 departmentArray.push(item.DepartmentName);  
     NWF$('#combobox').append(NWF$('<option>', {  
       value: item.DepartmentName,  
       text: item.DepartmentName  
     }));  
   });  
   if (isNewMode) {  
 setValToDropdown(userDep);  
   } else {  
     var valToSet1 = NWF$(NWF$(".formDepartmentField").find('input')[0]).val();  
 setValToDropdown(valToSet1);  
   }  
   if (isDisplayMode) {  
 setTimeout(function () {  
       NWF$('.ui-widget').attr("disabled", "disabled");  
       NWF$('a.ui-button').unbind('click').removeAttr('title');  
     }, 100);  
   }  
   NWF$(function () {  
 NWF$.widget("custom.combobox", {  
       _create: function () {  
 this.wrapper = NWF$("<span>").addClass("custom-combobox").insertAfter(this.element);  
 this.element.hide();  
         this._createAutocomplete();  
         this._createShowAllButton();  
       },  
       _createAutocomplete: function () {  
         var selected = this.element.children(":selected"),  
           value = selected.val() ? selected.text() : "";  
 this.input = NWF$("<input>").appendTo(this.wrapper).val(value).attr("title", "").addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left").autocomplete({  
           delay: 0,  
 minLength: 0,  
           source: NWF$.proxy(this, "_source")  
         }).tooltip({  
           classes: {  
             "ui-tooltip": "ui-state-highlight"  
           }  
         });  
 this._on(this.input, {  
 autocompleteselect: function (event, ui) {  
 ui.item.option.selected = true;  
 this._trigger("select", event, {  
               item: ui.item.option  
             });  
           },  
 autocompletechange: "_removeIfInvalid"  
         });  
       },  
       _createShowAllButton: function () {  
         var input = this.input,  
 wasOpen = false;  
         NWF$("<a>").attr("tabIndex", -1).attr("title", "Show All Items").tooltip().appendTo(this.wrapper).button({  
           icons: {  
             primary: "ui-icon-triangle-1-s"  
           },  
           text: false  
         }).removeClass("ui-corner-all").addClass("custom-combobox-toggle ui-corner-right").on("mousedown", function () {  
 wasOpen = input.autocomplete("widget").is(":visible");  
         }).on("click", function () {  
 input.trigger("focus"); /*Close if already visible*/  
           if (wasOpen) {  
 return;  
           } /*Pass empty string as value to search for, displaying all results*/  
 input.autocomplete("search", "");  
         });  
       },  
       _source: function (request, response) {  
         var matcher = new RegExp(NWF$.ui.autocomplete.escapeRegex(request.term), "i");  
         response(this.element.children("option").map(function () {  
           var text = NWF$(this).text();  
           if (this.value&& (!request.term || matcher.test(text))) return {  
             label: text,  
             value: text,  
             option: this  
           };  
         }));  
       },  
       _removeIfInvalid: function (event, ui) {  
         /*Selected an item, nothing to do*/  
         if (ui.item) {  
 return;  
         } /*Search for a match (case-insensitive)*/  
         var value = this.input.val(),  
 valueLowerCase = value.toLowerCase(),  
           valid = false;  
 this.element.children("option").each(function () {  
           if (NWF$(this).text().toLowerCase() === valueLowerCase) {  
 this.selected = valid = true;  
             return false;  
           }  
         }); /*Found a match, nothing to do*/  
         if (valid) {  
 return;  
         } /*Remove invalid value*/  
 this.input.val("");  
 this.element.val("");  
 this.input.autocomplete("instance").term = "";  
       },  
       _destroy: function () {  
 this.wrapper.remove();  
 this.element.show();  
       }  
     });  
     NWF$("#combobox").combobox();  
   });  
   NWF$('.formDepartmentField').hide();  
 });  
 function getUserDepartment() {  
   var dataToReturn = "";  
   var reqUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties";  
   $.ajax({  
     url: reqUrl,  
     type: "GET",  
     headers: {  
       "accept": "application/json;odata=verbose"  
     },  
     async: false,  
     success: function (data) {  
       if (data.d&&data.d.UserProfileProperties&&data.d.UserProfileProperties.results) {  
 dataToReturn = data.d.UserProfileProperties.results[11].Value;  
       }  
     }  
   });  
   return dataToReturn;  
 }  
 function getDepartmentData() {  
   var dataToReturnDep = [];  
   var reqUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Lists%20Of%20Departments')/items?$select=DepartmentName&$top=1000";  
   $.ajax({  
     url: reqUrl,  
     type: "GET",  
     headers: {  
       "accept": "application/json;odata=verbose",  
       "content-type": "application/json;odata=verbose"  
     },  
     async: false,  
     success: function (data) {  
       if (data &&data.d&&data.d.results) {  
 dataToReturnDep = data.d.results  
       }  
     }  
   });  
   return dataToReturnDep;  
 }  
 function onUserNameChange(dataFun) {  
   var dataToReturn = "";  
   var reqUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='" + dataFun + "'";  
   $.ajax({  
     url: reqUrl,  
     type: "GET",  
     headers: {  
       "accept": "application/json;odata=verbose"  
     },  
     async: false,  
     success: function (data) {  
       if (data.d&&data.d.UserProfileProperties&&data.d.UserProfileProperties.results) {  
 dataToReturn = data.d.UserProfileProperties.results[11].Value;  
       }  
     }  
   });  
   return dataToReturn;  
 };  
 function setValToDropdown(valueToSet) {  
   NWF$('#combobox').val(valueToSet);  
   NWF$('#combobox').change();  
 };  

Step 6: Apply CSS.

On form setting, expand the Custom CSS tab.



You can add below code for designing the dropdown as per business need.

 .nf-form-input {       
   border: 1px solid #d4dbe0;  
 }  
 .nf-form-label .nf-filler-control-inner{    
   top: 1px;  bottom: 1px; line-height: 1.2;  
 }  
 .custom - combobox - input {  
   width: 90 %  
 }  
 .custom - combobox {  
   padding: 10 px;  
 }.custom - combobox {  
   height: 34 px; margin: 10 px; padding: 0 px; display: block; border: 1 px solid #ababab;  
 }.custom - combobox> input {  
   height: 29 px; background: #ffffff; border: 0 px; margin - top: 2 px!important; width: 93 % ;  
 }       

Conclusion

This is how Autocomplete dropdown cab be setup in Nintex Form.

 If you have any questions you can reach out our SharePoint Consulting team here.

March 18, 2021

[Resolved]: Quick way to troubleshoot error "Data Object does not exist" in the InfoPath forms in SharePoint Online.

Introduction

We performed the migration of the InfoPath forms from SharePoint On-Premises to the SharePoint Online environment using InfoPath designer for a Postal and Parcel company based out of Melbourne, Victoria, Australia. We updated all the data connections as per the online version. But, when we work with a large form, it contains a lot of rules and actions. And, In any of the rules/actions, if it has any of the invalid data connection then, it becomes difficult for us to troubleshoot/identify the error.

Issue

  • We faced one issue "The DataObject does not exist" while migrating the form and in this blog, we will learn a quick way for the steps to perform for troubleshooting this type of error in the InfoPath forms. 
  • We encounter the below error while previewing or publishing the form.



Solution 

  • To troubleshoot this issue, we need to find this data object error and  then we can update it or remove it from the form as per requirement. 
  • Here, we will work with the manifest file, and then we will troubleshoot it from the InfoPath Designer.
  • This is an easy way to find the rule/action which contains the "data object does not exist error".   

Steps to find and troubleshoot this type of errors.

Step 1:

  • Open the “Publish” menu and click on the “Export source files” button as shown below. 

Step 2:

    • Select a folder to export the source files and click on “OK”. 


    • Now navigate to the “Extracted” folder and open the “manifest” file with any text editor. 

    Step 3:

        • This manifest file is an XML file and it contains all the rules, actions, and views where these data objects are used. 
        • So we can find our data object here as shown below. 
        • It will show us an XML tag that contains the “caption” property and this is the name of our rule. 



        Step 4:

                    • Once, we found the rule which uses the detected data object, we can simply look for that rule/action in the InfoPath designer by navigating to the "Managed Rules" section. 
                    • There are many ways to search for a rule, one of the way is to find our data object inside the "Rules Inspector" which is inside the "Data" tab from the top ribbon. 


                    • Now we can modify it and can update it as per our requirement.

                     

                    Conclusion

                          This is how we can troubleshoot errors quickly in the InfoPath form. I hope this will help you. Have a Good day! 


                          If you have any questions you can reach out our SharePoint Consulting team here.