locked
I want to develop a SPFX webpart with react js that field has to find the user information and email notification RRS feed

  • Question

  • I want to develop a SPFX webpart which has a textbox control that has to fetch the user information from the active directory and select few checkboxes after submitting i need to send an email to the respected users.

    Form Should like similar below:

    The above has to fetch the users display name based the user input it has to fetch the user display name and email from azure active directory.

    User will select the checkbox values once user submitted email to has to the email with the check box values and with few images in the body of the email

    Monday, July 20, 2020 5:03 AM

Answers

  • Hi SatyaNK,

    In this situation, you can use PnP People Picker to let user select special user when input some character:

    PnP People Picker Control

       public render(): React.ReactElement<IPnPPickerProps> {
        return (
    
          <PeoplePicker
            context={this.props.context}
            titleText="People Picker"
            personSelectionLimit={3}
            groupName={""}
            defaultSelectedUsers={["jerry@zheguo.onmicrosoft.com"]}
            showtooltip={true}
            isRequired={true}
            disabled={false}
            selectedItems={this._getPeoplePickerItems}
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000}
            errorMessage={"Invalid User"}
          />
        );
      }
      private _getPeoplePickerItems(items: any[]) {
        console.log('DisplayName: ', items[0].text);
        console.log('Email: ', items[0].secondaryText);
     }


    After getting email, send the email with Graph API:

    How to Send Email with Attachments using Graph API in SPFx (React JS)

    Thanks

    Best Regards


    "SharePoint" forums will be migrating to a new home on Microsoft Q&A !
    We invite you to post new questions in the "SharePoint" forums' new home on Microsoft Q&A !

    Tuesday, July 21, 2020 2:29 AM

All replies

  • Hi SatyaNK,

    In this situation, you can use PnP People Picker to let user select special user when input some character:

    PnP People Picker Control

       public render(): React.ReactElement<IPnPPickerProps> {
        return (
    
          <PeoplePicker
            context={this.props.context}
            titleText="People Picker"
            personSelectionLimit={3}
            groupName={""}
            defaultSelectedUsers={["jerry@zheguo.onmicrosoft.com"]}
            showtooltip={true}
            isRequired={true}
            disabled={false}
            selectedItems={this._getPeoplePickerItems}
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000}
            errorMessage={"Invalid User"}
          />
        );
      }
      private _getPeoplePickerItems(items: any[]) {
        console.log('DisplayName: ', items[0].text);
        console.log('Email: ', items[0].secondaryText);
     }


    After getting email, send the email with Graph API:

    How to Send Email with Attachments using Graph API in SPFx (React JS)

    Thanks

    Best Regards


    "SharePoint" forums will be migrating to a new home on Microsoft Q&A !
    We invite you to post new questions in the "SharePoint" forums' new home on Microsoft Q&A !

    Tuesday, July 21, 2020 2:29 AM
  • Thanks Jerry for your quick reply.

    I want to get the information of selected users manager name and department name how can we achieve this?

    Tuesday, July 21, 2020 5:26 PM
  • Hi Satya,

    Yes, use PnP Js can read all additional User Profile Property, you can refer a demo from here:

    Retrieve User Profile Properties Using SPFx And PnP JS In SharePoint Online

    Thanks

    Best Regards


    "SharePoint" forums will be migrating to a new home on Microsoft Q&A !
    We invite you to post new questions in the "SharePoint" forums' new home on Microsoft Q&A !

    Wednesday, July 22, 2020 1:32 AM
  • Hi Jerry,

    Thanks for your immediate reply.

    I am using pnp js for sending email its working fine but the property of 'From' email id if i give my mail id also 

    in email its showing as 'no-reply@sharepointonline.com'

    code:

     const emailProps: EmailProperties = {
        To: ["rak@x123.com"],
        From: "ko@a123.com",
        Subject: "This email is about...",
        Body: "Here is the body. <b>It supports html</b>"

    If i give 'From' value as ko@a123.com in the email from i can see 'ko'<no-reply@sharepointonline.com>  but i want to replace  'ko'<no-reply@sharepointonline.com>  with ko@a123.com how can we achieve this

    Wednesday, July 22, 2020 4:45 PM
  • Hi SatyaNK,

    This is by design in SharePoint, the From address in the email sent within SharePoint will always use "no-reply@sharepoint.com", please refer the document here for details:

    Information about changes to the address that is used to send notification email messages from SharePoint

    As this reason, we can't change the From email address.

    Thanks

    Best Regards


    "SharePoint" forums will be migrating to a new home on Microsoft Q&A !
    We invite you to post new questions in the "SharePoint" forums' new home on Microsoft Q&A !

    Thursday, July 23, 2020 1:01 AM
  • Hi Jerry,

    Is there any other way to send an email to the users the 'From' should be always based on the logged in user

    Thursday, July 23, 2020 3:45 AM
  • Hi SatyaNK,

    I'm afraid, this is not possible to change the From email address from "no-reply@sharepointonline.com" to anything else.

    This is a fixed from address in SharePoint Online.

    Please see the same UserVoice here:

    Allow a company to change the no-reply@sharepointonline.com to something similar to no-reply@<companyname>.com.

    You can vote up the UserVoice so that Microsoft will think about it in the future.

    In additional, if my reply to the original question is helpful, you could Mark as answer so that it could help others in the forum.

    Thanks

    Best Regards


    "SharePoint" forums will be migrating to a new home on Microsoft Q&A !
    We invite you to post new questions in the "SharePoint" forums' new home on Microsoft Q&A !

    Thursday, July 23, 2020 4:09 AM