Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Service | Customer Service, Contact Center, Fie... / Power Pages Portal for...
Service | Customer Service, Contact Center, Fie...
Suggested answer

Power Pages Portal form to create new Case and Contact from anonymous user?

(1) ShareShare
ReportReport
Posted on by NicholasHE 44
I am trying to create a form within a Power Pages portal website, that will create a new Case and associated Contact using the customer information defined in the fields.
 
The example is a general enquiries form, where the user shouldn't have a login or view details, but just submit a form for the Dynamics 365 back-end user to manage and resolve.
 
Because a Contact is a required field for a Case, how could this be achieved with OOTB functionality, or JavaScript on the page?
 
For example, these are the fields that would be presented to the user:
 
  • First Name
  • Last Name
  • Email
  • Question Description
  • Attachments
Submitting this form should create a new Case with a preset Case type of Question, and be associated with a new Contact using the full name and email supplied.
 
Categories:
Dynamics 365 Customer Service
  • Suggested answer
    Saif Ali Sabri Profile Picture
    Saif Ali Sabri 381 on at
    Power Pages Portal form to create new Case and Contact from anonymous user?

    My response was crafted with AI assistance, tailored to provide detailed and actionable guidance for your query.
     

    To create a Power Pages (formerly known as Power Apps Portals) form that allows anonymous users to submit a Case and an associated Contact, you can achieve this using a combination of basic configuration and JavaScript customization.

    Step 1: Configure Table Permissions

    Since the user is anonymous, you need to allow access for the portal to create Contacts and Cases.

    1. Enable Table Permissions for Cases and Contacts:

      • Go to Power Pages Studio or Portal Management App.
      • Navigate to Security > Table Permissions.
      • Create two table permissions:
        • Contact Permission:
          • Table: Contact
          • Access Type: Global
          • Permissions: Create
          • Web Roles: Anonymous Users
        • Case Permission:
          • Table: Case
          • Access Type: Global
          • Permissions: Create
          • Web Roles: Anonymous Users

    2. Assign Table Permissions to Forms:

      • Ensure that the table permissions you just created are applied to the forms and lists used on the portal.

    Step 2: Design the Form

    Create a basic form in the Power Pages portal to collect the required data.

    1. In Dynamics 365 or Power Apps:

      • Go to Maker Portal (make.powerapps.com) and navigate to the Case table.
      • Create a new Quick Create Form or modify an existing form.
        • Add fields for:
          • Case Title (e.g., use the Question/Description as the title)
          • Case Type (preset to "Question")
          • Description (to hold the user's query)
          • Customer (which links to the associated Contact).

    2. Enable Anonymous Submission:

      • Ensure the form is exposed to the portal and supports submissions without login.

    3. Create Metadata for Default Case Type:

      • Add form metadata to pre-set the Case Type to "Question" (see Step 4 below for how to do this).

    Step 3: Add the Contact Creation Logic

    Since Contact is required for a Case, you’ll need to programmatically create a Contact and associate it with the Case. To do this:

    Using OOTB Entity Forms and Web Templates:

    1. Add JavaScript to Automate Contact Creation:

      • On the Case form, add JavaScript to create a Contact using the submitted First Name, Last Name, and Email fields before saving the Case.

    2. Steps:

      • Attach the JavaScript to the form using Custom JavaScript functionality in the form settings or web templates.

      Here’s a sample script for this:

      javascript
      $(document).ready(function () {
      $("#SubmitButton").click(function (e) {
      e.preventDefault();

      // Gather contact details from the form fields
      var firstName = $("#firstname").val();
      var lastName = $("#lastname").val();
      var email = $("#email").val();

      // Create the Contact record via Web API
      $.ajax({
      url: "/_api/contacts",
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify({
      firstname: firstName,
      lastname: lastName,
      emailaddress1: email
      }),
      success: function (contactResponse) {
      // Contact successfully created, now create the Case
      var contactId = contactResponse.contactid; // Assuming contactid is returned
      var description = $("#description").val();

      // Create the Case record via Web API
      $.ajax({
      url: "/_api/incidents",
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify({
      title: "Question",
      description: description,
      "customerid_contact@odata.bind": `/contacts(${contactId})`
      }),
      success: function () {
      alert("Case created successfully!");
      window.location.reload(); // Reload or redirect to confirmation page
      },
      error: function (err) {
      alert("Error creating Case: " + err.message);
      }
      });
      },
      error: function (err) {
      alert("Error creating Contact: " + err.message);
      }
      });
      });
      });
      • Replace the IDs (#firstname, #lastname, #email, etc.) with the actual field IDs or classes from your form.

    Step 4: Use Form Metadata for Default Values

    To set default values like Case Type = "Question":

    1. Go to Portal Management App:
      • Navigate to Entity Forms in the Portal Management App.
      • Open the Entity Form for the Case creation.
      • Add Entity Form Metadata:
        • Target Field: Case Type
        • Type: Default Value
        • Value: "Question"

    Step 5: Test the Portal

    1. Go to the portal anonymously.
    2. Fill in the form (First Name, Last Name, Email, Description, etc.).
    3. Submit the form and confirm:
      • A new Contact is created with the provided details.
      • A new Case is created, associated with the Contact.

    Optional Enhancements

    1. Enable File Attachments:

      • Add a Note (Annotation) field to the form to allow file uploads.
      • Ensure the Annotation table permissions are set for anonymous users.

    2. Redirect After Submission:

      • Use the On Success Settings of the Entity Form to redirect users to a "Thank You" or confirmation page after submission.

    3. Error Handling and Validation:

      • Add client-side validation to ensure required fields (e.g., First Name, Last Name, Email) are filled out properly.

    This approach uses a combination of Power Pages OOTB features (for table permissions, entity forms, and metadata) and JavaScript for custom logic to handle the Contact and Case creation.

  • NicholasHE Profile Picture
    NicholasHE 44 on at
    Power Pages Portal form to create new Case and Contact from anonymous user?
    Hi Paul, no I had not considered that, thanks for the suggestion. This is an interesting feature.
     
    That would be excellent for some other submissions that multiple areas of enquiry detail, but this case the scenario would require a simple 1 page form.
  • prlopes90 Profile Picture
    prlopes90 48 on at
    Power Pages Portal form to create new Case and Contact from anonymous user?
    Hi,
     
    Have you explored the multistep forms?
     
     
     

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

Congratulations 2024 Spotlight Honorees

Kudos to all of our 2024 community stars! 🎉

Meet the Top 10 leaders for December

Congratulations to our December super stars! 🥳

Start Your Super User Journey Pt 2

Join the ranks of our community heros! 🦹

Leaderboard

#1
André Arnaud de Calavon Profile Picture

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

#2
Martin Dráb Profile Picture

Martin Dráb 230,605 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans