Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Customer experience | Sales, Customer Insights,... / Using Alert.JS for cus...
Customer experience | Sales, Customer Insights,...
Suggested answer

Using Alert.JS for custom pop-ups and running into an error

(0) ShareShare
ReportReport
Posted on by Aneeqa Pervaiz 240

Hello,

I am using the Alert.JS v3.1.3 by Paul Nieuwelaar to design a custom pop-up in the Phone Call entity. We are looking to prompt the users to create a follow up phone call when they mark the current one complete. I created a custom button on the ribbon to replace the OOB button of Mark Complete. So a pop up would ask the user if a follow up needs to be done, if they choose Yes, then a new record would be created which would copy over information from the existing open phone call to a new one, and mark the current one complete.
I am wondering how the custom button of 'Create Phone Call' would work. Would a separate JS code go behind this button getting values from the current record onto a new one? Can we attach a workflow or power automate flow to a 'Create Phone Call' button on the pop up?

Any help related to Alert.JS would be appreciated.

Thank you.

  • Suggested answer
    Justinjose Profile Picture
    Justinjose 2,707 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Yes, replace with record id. You could pass the recordid as a parameter from the Ribbon Workbench.

    CrmParameter value = FirstPrimaryItemId

    function createPopUp(FirstPrimaryItemId){

    // code goes here

    }

    Thanks

    Justin Jose

  • Aneeqa Pervaiz Profile Picture
    Aneeqa Pervaiz 240 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Thank you so much!

    I will try this out.

    One last thing,

    Xrm.WebApi.updateRecord("phonecall", recordid, data).then(

         function success(result) {

           new Dialog({

    Recordid: does this need to be replaced with the recordId? If yes, how would this work for all records?

  • Suggested answer
    Justinjose Profile Picture
    Justinjose 2,707 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Yes, you could either use below line but then you have to save the form either manually or using any other valid method

    crmWindow.Xrm.Page.getAttribute("amp_meetingobjectives").setValue(isCreate); // set optionvalue

    or could use WeApi.UpdateRecord

    // Web api to update the field
    var data = {
      "amp_meetingobjectives": isCreate
    }
    // update the record
    Xrm.WebApi.updateRecord("phonecall", recordid, data).then(
      function success(result) {
        new Dialog({
          title: "Phone Call created Successfully!",
          icon: "SUCCESS"
        }).show()
      },
      function (error) {
        new Dialog({
          title: "Can't Save!",
          icon: "ERROR"
        }).show()
      }
    );

    Thanks

    Justin Jose

  • Aneeqa Pervaiz Profile Picture
    Aneeqa Pervaiz 240 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Hello Justin,

    Thank you so much.

    One quick problem with the callback function, which I am hoping you can help me with again. 

    function createPhoneCall(data) {
  debugger;
  var isCreate = (data.getValue("createphonecall")== 'true');

  if(isCreate){
    var crmWindow = new parent.Dialog().getCrmWindow();
    
    // Could use Xrm.WebApi.updateRecord or Xrm.Page.getAttribute("attributename").setValue(1)
    crmWindow.Xrm.Page.getAttribute("amp_createfollowupphonecall").setValue(isCreate);  // set optionvalue
    crmWindow.Xrm.WebApi.updateRecord(entityLogicalName, id, data).then(successCallback, errorCallback);

    // Get Current PhoneCall
    crmWindow.Xrm.WebApi.retrieveRecord("phonecall", recordid).then(
      function success(result) {         

          // define the data to create new phonecall record       
          
              var data =
              {
                  attributename: result.value  // attributes values                 
              }

              // create account record
              crmWindow.Xrm.WebApi.createRecord("phonecall", data).then(
              function success(result) {
                 
                  // perform operations on record creation
                  new Dialog({
                    title: "Phone Call created Successfully!",
                    icon: "SUCCESS"
                    }).show()
              },
              function (error) {
                  console.log(error.message);
                  // handle error conditions
              }
              );
      },
      function (error) {
          console.log(error.message);
          // handle error conditions
      }
  );

    I do not want to set the new record details in the callback. This is because there are more details that would be carried over other than the ones on the prompt. So I am thinking if I can just get the code to change one field on the form, that can trigger a flow and create the new record, and copy over the information. 

    What we are working with right now is just the first option set field of Yes/No. Would the same way work with accessing the data entered in the prompt for the Group? As the rest of my values in the prompt would be used in the new phone call record. I am thinking that I can put hidden fields on the form which can copy those over and then my flow can set those values.
    pastedimage1610664101178v1.png

     Also if i am looking to just change a single field and not copy a whole lot of information and create a new record, then I wouldn't need to add anything after setting value to the schema field, right?
    pastedimage1610664194007v2.png

    I look forward to your reply. 

    Thank you. 

  • Suggested answer
    Justinjose Profile Picture
    Justinjose 2,707 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Hi Aneeqa,

    below is the pseudocode,

    you could use either crmWindow.Xrm.Page.getAttribute("amp_createfollowupphonecall").setValue(bool); // Two Optionset value

    or 

    Xrm.WebApi.updateRecord(entityLogicalName, id, data).then(successCallback, errorCallback);

    function createPopup(recordid) // recordid from ribbon workbench
{  
  new Dialog({
  id: "createphonecall",
  height: 500,
  width: 600,
  title: "Follow-Up Phone Call",
  icon: "QUESTION",
  message: "This would create a new phone record with the same information",
  buttons: [
      new Dialog.Button("Create Phone Call",createPhoneCall, true),
      new Dialog.Button("Not now")
  ]
}).showPrompt([
  new Dialog.OptionSet({ id: "createphonecall", label: "Create Phone Call", options: [
      { text: "Yes", value: true },
      { text: "No", value: false },
      ] }),
  new Dialog.Group ({
  label: "New Phone Call Details",
  fields: [
      new Dialog.Input({ id: "scheduledend", label: "Due Date", type: "date", value: new Date() }),
  new Dialog.OptionSet({ id: "amp_meetingcategory", label: "Meeting Category", value: 0, options: [
      { text: "", value: 0 },
      { text: "Introduction", value: 1 },
      { text: "Investigate New Business", value: 2 },
      { text: "Investigate Expanded Business", value: 3 },
      { text: "Present Proposal", value: 4 },
      { text: "Negotiation/Review", value: 5 },
      { text: "Resolution of Concerns", value: 6 },
      { text: "Carrier Service Review", value: 7 },
      { text: "Investigate Lost Business", value: 8 },
      ] }),
  new Dialog.MultiLine({ id: "amp_meetingobjectives", label: "Meeting Objectives" })
  ]
  })
]);
}

// Button Call back function
function createPhoneCall(data) {
  debugger;
  var isCreate = (data.getValue("createphonecall")== 'true');

  if(isCreate){
    var crmWindow = new parent.Dialog().getCrmWindow();
    
    // Could use Xrm.WebApi.updateRecord or Xrm.Page.getAttribute("attributename").setValue(1)
    crmWindow.Xrm.Page.getAttribute("amp_createfollowupphonecall").setValue(isCreate);  // set optionvalue
    crmWindow.Xrm.WebApi.updateRecord(entityLogicalName, id, data).then(successCallback, errorCallback);

    // Get Current PhoneCall
    crmWindow.Xrm.WebApi.retrieveRecord("phonecall", recordid).then(
      function success(result) {         

          // define the data to create new phonecall record       
          
              var data =
              {
                  attributename: result.value  // attributes values                 
              }

              // create account record
              crmWindow.Xrm.WebApi.createRecord("phonecall", data).then(
              function success(result) {
                 
                  // perform operations on record creation
                  new Dialog({
                    title: "Phone Call created Successfully!",
                    icon: "SUCCESS"
                    }).show()
              },
              function (error) {
                  console.log(error.message);
                  // handle error conditions
              }
              );
      },
      function (error) {
          console.log(error.message);
          // handle error conditions
      }
  );
  }   
}

    Thanks

    Justin Jose

  • Aneeqa Pervaiz Profile Picture
    Aneeqa Pervaiz 240 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Hey Justin, 

    Thank you so much for replying. Since you know your way around Alert.JS, I would be so so grateful if you can have a peek at my code. As far as the pop-up is concerned, that all works fine. I am really struggling with where to set values to the field. If I can get the value correct for one field from the prompt, I would replicate for the rest of them (Since the additional fields are needed in the new phone record). 

    new Dialog({
    id: "createphonecall",
    height: 500,
    width: 600,
    title: "Follow-Up Phone Call",
    icon: "QUESTION",
    message: "This would create a new phone record with the same information",
    buttons: [
        new Dialog.Button("Create Phone Call", function(responses) {
        var createphonecall = responses[4].value;
        var crmWindow = new parent.Dialog().getCrmWindow();
        crmWindow.Xrm.Page.getAttribute("createphonecall").setValue("amp_createfollowupphonecall")
        new Dialog({
        title: "Phone Call created Successfully!",
        icon: "SUCCESS"
        }).show();
        }, true),
        new Dialog.Button("Not now")
    ]
}).showPrompt([
    new Dialog.OptionSet({ id: "createphonecall", label: "Create Phone Call", value: 3, options: [
        { text: "Yes", value: 4 },
        { text: "No", value: 3 },
        ] }),
    new Dialog.Group ({
    label: "New Phone Call Details",
    fields: [
        new Dialog.Input({ id: "scheduledend", label: "Due Date", type: "date", value: new Date() }),
    new Dialog.OptionSet({ id: "amp_meetingcategory", label: "Meeting Category", value: 0, options: [
        { text: "", value: 0 },
        { text: "Introduction", value: 1 },
        { text: "Investigate New Business", value: 2 },
        { text: "Investigate Expanded Business", value: 3 },
        { text: "Present Proposal", value: 4 },
        { text: "Negotiation/Review", value: 5 },
        { text: "Resolution of Concerns", value: 6 },
        { text: "Carrier Service Review", value: 7 },
        { text: "Investigate Lost Business", value: 8 },
        ] }),
    new Dialog.MultiLine({ id: "amp_meetingobjectives", label: "Meeting Objectives" })
    ]
    })
  
]);

    For this line in the code:  crmWindow.Xrm.Page.getAttribute("createphonecall").setValue("amp_createfollowupphonecall"); createphonecall is the label name in the pop-up, and amp_createfollowupphonecall is the schema name of the field i want to change to Yes when the button is clicked. 

    I know I am super close to getting this done, I have scoured the documentation and tried all kinds of ways, but to no avail. I think the problem may be with the variables, but I am not sure.

    Thank you in advance. 

  • Suggested answer
    Justinjose Profile Picture
    Justinjose 2,707 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Hi Aneeqa,

    You could try following steps

    1. Pass the Record Id to the function from Ribbon Workbench

    2. Attach a callback function to the "Create Phone Call" button

    buttons: [
        new Dialog.Button("Create Phone Call", createPhoneCall, true),
        new Dialog.Button("Cancel")
    ]

    3. Create dialog with id or could use index value (Show Prompt is an Array of Objects)

    new Dialog.Input({ id: "Date", label: "Date", type: "date", value: new Date() }),

    4. On click event of "Create Phone Call", use "getValue("id or array index") to get the two option field value.

    function createPhoneCall(data) {
  data.getValue("Date") // use id or
  data.getValue(0) // use index
}

    5. If "Yes", Use web api to retrieve phone call record using the above recordid. Get all the field values and make a post webapi request to create new phone call and a post request to mark current record to complete status.

    Hope this helps

    Justin Jose

  • Aneeqa Pervaiz Profile Picture
    Aneeqa Pervaiz 240 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Hey Pravin,

    I did have a look at your blog, the problem is that I could not see any option to take inputs from the user and apply to a new record. Only displaying the alert is not the task. Can your way take inputs?

    This is a screenshot of what I am looking for:

    pastedimage1610549311867v1.png

  • Suggested answer
    Pawar Pravin Profile Picture
    Pawar Pravin 5,227 on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    I would suggest you to use OOB alerts rather than using third party solution.

    Please refer below url to create alert based on your requirement:

    pravinpawarweb.wordpress.com/.../

  • Francisco Murtinheira Profile Picture
    Francisco Murtinheira on at
    RE: Using Alert.JS for custom pop-ups and running into an error

    Hello,

    I am not sure what Alert.JS is, but when it comes to JavaScript you can either create records from it, or you can call a Flow, that is also possible.

    docs.microsoft.com/.../createrecord

    carldesouza.com/.../

    Hope this helps.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,280 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,235 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans