Updating Field Values with a Button in PowerApps using JavaScript

-
In the world of low-code and no-code development, PowerApps is a powerful tool for building custom business applications without the need for coding expertise. In this blog post, we'll explore a practical scenario where we demonstrate how to update field values using a button in PowerApps.


Step 1: Open the PowerApp Portal and select the appropriate environment.


Step 2: Select the Model-driven app where you want to add an action.

Step 3: Right-click on the app file and choose the "Edit" option.


Step 4: Within the app, select the desired page, right-click, and then choose "Edit Command Bar" from the list of options.


Step 5: Locate the "Main Form" and click on the "Edit" button.



Step 6: Click on the "New" button, as indicated in the image, and select "Command."


Step 7: After creating the button, add properties such as Label and Icon, as shown below.


Step 8: For JavaScript functionality, use the properties mentioned below.


Step 9: Select the JavaScript file as indicated in the image, and then click "Save & Publish." You can create a sample .javascript file and upload it.



Step 10: Click on the "Save and Publish" button located in the top-right corner.


Step 11: Navigate to the "Tables" section and search for the table named "Fundraiser," as shown in the image and open it.


Step 12: Click on the column icon.


Step 13: Create a new column by clicking on "New Column" and configure it as shown below. Don't forget to save your changes.


Step 14: Return to the "Fundraiser" table and click on "Forms" to add the new field to the form.



Step 15: Select the "Main Form" to add the field.


Step 16: Choose the field and drag it to a position after the "story" field in the form.

Step 17: After adding the field, it should appear as shown in the image.



Step 18: Open the Fundraisers app and select a record to check if the button is visible or not.


Step 19: You should now see the button and field as added in the image.


Step 20: When you click the button, it will automatically update the value as mentioned in the JavaScript code.


Step 21:  In the JavaScript code, specify the logic for updating the "donations Amount" to the "Main total Donation" field as shown.


Here's a sample JavaScript code that you can use to update a field value when a button is clicked within a PowerApps Model-driven app


function updatedonation(primaryControl)
{
    var formContext = primaryControl;
    var sample_fundraiserid = formContext.data.entity.getId().replace("{", "").replace("}", "");
      var sample_donationamount;
        var req = new XMLHttpRequest();
        req.open("GET", Xrm.Utility.getGlobalContext().getClientUrl() +
             "/api/data/v9.2/sample_donations?$select=sample_donationamount,'subject&$expand=regardingobjectid_sample_fundraiser_sample_donation($select=sample_fundraiserid)&$filter=_regardingobjectid_value eq "+sample_fundraiserid, true);
        req.setRequestHeader("OData-MaxVersion", "4.0");
        req.setRequestHeader("OData-Version", "4.0");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Prefer", "odata.include-annotations=*");
        req.onreadystatechange = function () {
            if (this.readyState === 4) {
                req.onreadystatechange = null;
                if (this.status === 200) {
                    var results = JSON.parse(this.response);
                    console.log(results);
                    for (var i = 0; i < results.value.length; i++) {
                        var result = results.value[i];
                        // Columns
                        var activityid = result["activityid"]; // Guid
                        if (sample_donationamount  != null)
                        {
                         sample_donationamount = result["sample_donationamount"]  + sample_donationamount; // Currency
                        }
                        else 
                        {
                            sample_donationamount = result["sample_donationamount"] 
                        }                     
                        var subject = result["subject"]; // Text
                        
                        // Many To One Relationships
                        if (result.hasOwnProperty("regardingobjectid_sample_fundraiser_sample_donation") && result["regardingobjectid_sample_fundraiser_sample_donation"] !== null) {
                            var regardingobjectid_sample_fundraiser_sample_donation_sample_fundraiserid = result["regardingobjectid_sample_fundraiser_sample_donation"]["sample_fundraiserid"]; // Guid
                        }
                    }

                    formContext.getAttribute("new_totaldonation").setValue(sample_donationamount);

                } else {
                    console.log(this.responseText);
                }
            }
        };
        req.send();      

    }


Regards,
Dharmendra Chavda

Comments

Post a Comment

Popular posts from this blog

Data Upload into CRM from Excel Using Power Automate

-
Image
When managing a CRM like Microsoft Dynamics 365, uploading data from an Excel file can be a tedious manual task, especially when working with large datasets. You can automate this process using Power Automate (formerly known as Microsoft Flow), saving time and ensuring data consistency. Step 1: Prepare Your Data in Excel Ensure that your Excel file is well-organized, the  first row contains the Header names, and check incorrect values to prevent upload issues. Step 2: Create a table in Excel or based on the requirement.            Import Contact Template Step 3: Upload Your Excel File to OneDrive. Power Automate needs access to your Excel file. Store your file in a cloud-based location like OneDrive for Business or SharePoint: Upload the file to your OneDrive. Take note of the file path, as you will need it in Power Automate. Step 4: Set Up Power Automate to Upload Excel Data to CRM Now, we will set up a flow to automate the data upload process. Log in...
Read more

Run a Dynamics 365 Plugin from JavaScript on Button Click

-
Image
Trigger a Dynamics 365 Plugin from JavaScript on Button Click In Dynamics 365, plugins usually run when system events happen — like creating, updating, or deleting a record. But in some cases, you might want to run a plugin only when the user clicks a button on a form. This blog will guide you step by step on how to trigger a Dynamics 365 plugin from JavaScript using a Custom Action and a Plugin. Steps to call a plugin from JavaScript   Create a Custom Action Open Advanced Settings → Solutions (or open the specific solution where you want to add the action). Click New in the top menu. Choose Automation → Process. From the process types, pick Action — use an Action when you want to call plugins or custom logic from JavaScript, workflows, or Power Automate. Once you click on Action a Quick Create Process form will open and fill details. After that below form is open and you can update process argument as below. And Activate process. 2. Register the Plugin on the Acti...
Read more

Update a Lookup Field value using PowerAutomate

-
Image
 Hello Readers, Update a Lookup Field value using PowerAutomate. Step 1: Create a New Flow and add the below trigger to the update field. Select the Entity Assignment to update when another field in modified or updated. Step 2: Add another trigger to fetch the value from another entity Contact to update data in the Assignment entity. Row ID: Select from the Assignment entity field to match with the contact entity. Step 3: Add the Update trigger and select the same entity Assignment. Row ID: select from Assignement unique entity. Supervisor: Select the update field based on our requirements. Regards, Dharmendra Chavda
Read more