Recently a control I have had published for quiet some time started to break (in July). This code base has not changed and has been working fine for some time. Trying to determine what update is causing this change in behavior. The issue is on initial load the field mapped to the control shows null data. But if you do a post back again (F5) it will work on the second load and if you exit the record and re-open it will work fine. Trying to understand why all of a sudden it's displaying null on initial load. As I have said - the code hasn't changed since Mar 18, 2020. This is a modified version of the PeoplePicker control -
import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PeoplePickerTypes, IPeopleProps, IPeoplePersona } from './Peoplepicker';
export class OfficeUIFabricReactPeoplePicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private theContainer: HTMLDivElement;
private notifyOutputChanged: () => void;
private _context: ComponentFramework.Context<IInputs>;
private props: IPeopleProps = {
//tableValue: this.numberFacesChanged.bind(this),
peopleList: this.peopleList.bind(this),
}
/**
* Empty constructor.
*/
constructor() {
}
/**
* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
* Data-set values are not initialized here, use updateView.
* @Param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
* @Param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
* @Param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
* @Param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
*/
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {
// Add control initialization code
this.notifyOutputChanged = notifyOutputChanged;
this._context = context;
this.theContainer = container;
}
/**
* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
* @Param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
*/
public async updateView(context: ComponentFramework.Context<IInputs>) {
// Add code to update control view
this.props.context = context;
if (context.parameters.peoplePicker.raw !== null) {
if (context.parameters.peoplePicker.raw!.indexOf("text") > 1) {
this.props.preselectedpeople = JSON.parse(context.parameters.peoplePicker.raw!);
}
}
ReactDOM.render(
React.createElement(
PeoplePickerTypes,
this.props
),
this.theContainer
);
}
/**
* It is called by the framework prior to a control receiving new data.
* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
*/
public getOutputs(): IOutputs {
return {
peoplePicker: JSON.stringify(this.props.people)
};
}
private peopleList(newValue: IPeoplePersona[]) {
if (this.props.people !== newValue) {
if (newValue.length === 0) {
this.props.people = undefined;
}
else {
this.props.people = newValue;
}
this.notifyOutputChanged();
}
}
/**
* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
* i.e. cancelling any pending remote calls, removing listeners, etc.
*/
public destroy(): void {
// Add code to cleanup control if necessary
ReactDOM.unmountComponentAtNode(this.theContainer);
}
}
Solved! Go to Solution.
No, the "null first, value second" thing is something I've seen before, that's why I knew to guess it. I am not sure how to reliably reproduce (or avoid) it, which is why I just take approaches that circumvent it. So again, make sure your nullcheck is safe (you already have a !== null, so that should safely avoid any exceptions) then add in a line right before your reactdom.render, basically the same thing you are doing in Dispose:
ReactDOM.unmountComponentAtNode(this.theContainer);
This will let your component run once, with a null string, which will render nothing in the picker. But then when updateView gets called again and has a value, it will unload that empty version of the control and reload with an actual value.
Nothing is jumping out at me as problematic in this code. What do you see when you debug the control using browser developer tools?
Hi @shadowfox
I don't know if that has something to do with it, but what's the reason of searching the "text" inside the peoplePicker parameter?
context.parameters.peoplePicker.raw!.indexOf("text")
If after the reload it works, maybe the first render triggers the "peopleList" witch changes the value.
Otherweise, I agree with @cchannon , it depends on which values are passed to updateView when it's triggered.
Kind regards,
Diana
@cchannon When using the debug tool - on the initial load when it first hits the updateview this is what I see (image below which shows the field being null) -
But then on the second call of the updateview is shows the data but at this point it's not rendering.
If I close the page and re-open the initial load this time has a value -
This is the part that makes no sense to me. The fact on a cold load - the initial is null but then after closing and re-opening it's fine. As I said - this has been working wonderfully for over a year with no issues but this behavior just started. I did also try to update my npm packages and see if that fixed it but no luck.
Thanks.
@DianaBirkelbach thanks for the reply! The indexOf("text") is verifying the JSON has the label text in it to get the label for the control. Otherwise if text is missing, then the JSON main part is malformed and won't work. Hope that helps better explain that. Sadly - with the issue I'm having - I'm not hitting this part since the field is passing null on the initial cold load.
Thanks!
Hi @shadowfox ,
Now I'm making some wild guessing.
Maybe the "this.props" makes some trouble because the props is reserved in react, and the PCFs are based on react. Thinking of it, you actually don't need the private "props" in your class, which you also pass as a reference to the component PeoplePickerTypes as props. I also suppose that the changing of the content inside the props won't be reflected, since you render the PeoplePickerTypes with the same reference of the props, but you change the content (props should be immutable).
In your class, you only need the value (in your case the people).
So I suggest, not to define a private "props" in your class. The props you pass to your PeoplePickerTypes can be defined just where you call the render function. All you need to keep in the class is the value for people, and the function itself (peopleList).
I've also saw that the updateView is declared "async". Not so sure if it's supposed to work that way, but I also don't see where you have the await. I suggest to delete the async.
It the explanation is not clear enough, please let me know.
Hope it helps.
Kind regards,
Diana
@shadowfox When you say, "the field is passing null" do you mean
context.parameters.peoplePicker.raw
is coming through as null even though the attrib does contain a JSON value?
@cchannon Yes - that was on the debugger image I grabbed. The context.parameters.peoplePicker.raw is null on initial cold load. Very crazy - this is something new I'm experiencing.
@DianaBirkelbach thanks for the reply. You did catch something I was trying just to see if it made a difference but it didn't. Here is the original code for that part. I was initially just using context.parameters.peoplePicker.raw but wanted to see if the this.props.context made any difference (mostly because I'm stuck and nothing else I tried worked so figured I'd try it just to rule it out). As for the async - this was initially developed as part of the PCF Gallery control - People Picker | PCF Gallery. I have modified the React code quiet a bit to handle any entity and fixed an issue with the async promise. But the index.ts page has been left untouched since I pulled it down. What's blogging my head its been working for over a year now just fine. This makes me think something with how controls are being rendered on cold load and binding has been changed. Thanks for the help!
public async updateView(context: ComponentFramework.Context<IInputs>) {
// Add code to update control view
this.props.context = context;
if (context.parameters.peoplePicker.raw !== null) {
if (context.parameters.peoplePicker.raw!.indexOf("text") > 1) {
this.props.preselectedpeople = JSON.parse(context.parameters.peoplePicker.raw!);
}
}
ReactDOM.render(
React.createElement(
PeoplePickerTypes,
this.props
),
this.theContainer
);
}
Well, updateView gets called multiple times onLoad (at least two, could be more depending on what's happening on your form) and you can even force it to fire with Client Script by using the fireOnChange() function.
So try debugging again and just put your breakpoint at the top of updateView. Is contex.parameters.peoplePicker null every time updateView gets called, or maybe just the first time?
Our ongoing BACK TO BASICS: TUESDAY TIP series dedicated to helping both new members and seasoned veterans of our community learn and grow reached a milestone ten posts! We're excited to present this "one stop" post for each of our #TuesdayTips, making it easier to find what you're looking for and help you understand the community: from ranking and badges to profile avatars, from being a Super User to blogging in the community, and so much more. Thank you for your incredible support for this series--we are so glad it was able to help so many of you navigate your community experience. Back to Basics Tuesday Tip #1: All About Your Community Account Find out the basics of your community account. Whether it's changing your username, updating an email address, understanding GDPR, or customizing your profile, this is the place to begin. ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #2: All About Community Ranks Have you ever wondered how your fellow community members earn the different ranks available? What is the difference between an Advocate and a Helper, a Solution Sage and a Community Champion? In this #TuesdayTip, we share the secrets and tips to help YOU keep your ranking growing--and why it's so important to our communities. ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #3: Contributing to the Community If you need to understand how subscriptions or notifications work, how to use search to find the answers you're looking for, or editing your posts, this is the place to start. With these handy tips, you'll find what you're looking for, ask some great questions, and format your posts perfectly! ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #4: What is a Super User? Have you ever been exploring the community and come across a user with this unique icon next to their name? It means you have found the actual, real-life superheroes of the Power Platform Community! Super Users are our heroes because of the way they are consistently helpful with everything from solutions to flagging spam, offering insight on the community, and so much more! Find out more in this #TuesdayTip. ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #5: How to Become a Community Blog Author We want YOU to be part of the community blog! Sharing your knowledge of Power Platform is an essential part of our community! By sharing what you know and have learned with the community in the Power Platform in the community blog, you help us create a more engaged and informed community, better equipped to tackle complex challenges. To get started with blogging across the Power Platform communities, please visit the following links. ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #6 All About Community User Groups Being part of, starting, or leading a User Group can have many great benefits for our community members who want to learn, share, and connect with others who are interested in the Microsoft Power Platform and the low-code revolution. Don't wait. Get involved with (or maybe even start) a User Group today--just follow the tips below to get started. ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #7: Resources for User Groups Once you've launched your Community User Group, we are excited to have many resources available that can help you lead, engage, and grow your User Group! Whether it's access to the Microsoft Community Tenant for User Groups, help with finding speakers for your User Group meetings (both local and virtual speakers), and even finding spaces to have your meetings in--check out this #TuesdayTip to get what you need! ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #8: All About Subscriptions and Notifications Keeping track of what you want to know and how you want to find out about it may seem confusing. This #TuesdayTip is all about your community profile's subscriptions and notifications settings. Check out the links below for clear directions and how-to's. ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #9: All About the Community Galleries Have you checked out the library of content in our galleries? Whether you're looking for the latest info on an upcoming event, a helpful webinar, or tips and tricks from some of our most experienced community members, our galleries are full of the latest and greatest video content for the Power Platform communities. Find out more by following the links below. ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Back to Basics Tuesday Tip #10: Community Support Whether you're a seasoned community veteran or just getting started, you may need a bit of help from time to time! If you need to share feedback with the Community Engagement team about the community or are looking for ways we can assist you with user groups, events, or something else, Community Support is the place to start. Community Support is part of every one of our communities, accessible to all our community members, so find out what it means for your community with our last #TuesdayTip. ○ Power Apps ○ Power Automate ○ Power Pages ○ Copilot Studio Thank you for your support for our #TuesdayTip series. We look forward to bringing you more tips and tricks to help make your community experience the best it can be!
Welcome to our November Newsletter, where we highlight the latest news, product releases, upcoming events, and the amazing work of our outstanding Community members. If you're new to the Community, please make sure to follow the latest News & Announcements and check out the Community on LinkedIn as well! It's the best way to stay up-to-date with all the news from across the Power Platform and beyond. This month's highlights:- - Our most active community members- Microsoft Power Up Program- Microsoft Community Days website - The latest blogs and more COMMUNITY HIGHLIGHTS Check out the most active community members of the last month. These hardworking members are posting regularly, answering questions, kudos, and providing top solutions in their communities. We are so thankful for each of you--keep up the great work! If you hope to see your name here next month, just get active! FLMikePstork1Nived_NambiarWarrenBelzSprongYeManishSolankiLaurensMwskinnermlcAgniusExpiscornovuscreativeopinion KatieAUinzil2kHaressh2728hafizsultan242douicmccaughanwoLucas001domliu Power Up Program Click the image below to discover more about the amazing Microsoft Power Up Program, as Reem Omar, Abbas Godhrawala, Chahine Atallah, Ruby Ruiz Brown, Juan Francisco Sánchez Enciso, Joscelyne Andrade Arévalo, Eric G. and Paulina Pałczyńska share how non-tech professionals can successfully advance into a new career path using Microsoft #PowerPlatform. To find out more about this amazing initiative, click here to apply for the program and reboot your journey into low-code app development today! Community Days - Event Website Have you checked out the Community Days website yet? Dedicated to the volunteer community organizers around the world, Community Days is the perfect place to find an event near you or add an event for wider exposure. Many thanks to Thomas Daly, Sharon Weaver, Sedat Tum, Jonathan Weaver, Manpreet Singh, David Leveille, Jason Rivera, Mike Maadarani, Rob Windsor and the team for all their hard work. Anyone can host a Community Day on any topic relevant to our industry, just click the image below to find out more. EVENT NEWS Power Platform French Summit - Paris/Virtual - 6-7th Dec It's not long now until the Power Platform French Summit, which takes place both virtually and in-person at the Microsoft France conference center in Paris on 6-7th December 2023. If you can't make it in-person, all sessions will also be broadcast on virtual networks for better distribution and accessibility. There's a fantastic array of speakers, including Jérémy LAPLAINE, Amira Beldjilali, Rémi Chambard, Erika Beaumier, Makenson Frena, Assia Boutera, Elliott Pierret, Clothilde Facon, Gilles Pommier, Marie Aubert, Antoine Herbosa, Chloé Moreau, Raphaël Senis, Rym Ben Hamida, Loïc Cimon, Joséphine Salafia, David Zoonekyndt, Aïcha Charpentier, Henry Jammes, Milene Rochard, Mehdi EL YASSIR, and many more. Click the image below for more information. LATEST COMMUNITY BLOG ARTICLES Power Apps Community Blog Power Automate Community Blog Copilot Community Blog Power Pages Community Blog
In the bustling world of technology, two dynamic leaders, Geetha Sivasailam and Ben McMann, have been at the forefront, steering the ship of the Dallas Fort Worth Power Platform User Group since its inception in February 2019. As Practice Lead (Power Platform | Fusion Dev) at Lantern, Geetha brings a wealth of consulting experience, while Ben, a key member of the Studio Leadership team at Lantern, specializes in crafting strategies that leverage Microsoft digital technologies to transform business models. Empowering Through Community Leadership Geetha and Ben's journey as user group leaders began with a simple yet powerful goal: to create a space where individuals across the DFW area could connect, grow their skills, and add value to their businesses through the Power Platform. The platform, known for its versatility, allows users to achieve more with less code and foster creativity. The Power of Community Impact Reflecting on their experiences, Geetha and Ben emphasize the profound impact that community engagement has had on both their professional and personal lives. The Power Platform community, they note, is a wellspring of resources and opportunities, fostering continuous learning, skill enhancement, and networking with industry experts and peers. Favorite Moments and Words of Wisdom The duo's favorite aspect of leading the user group lies in witnessing the transformative projects and innovations community members create with the Power Platform. Their advice to aspiring user group leaders? "Encourage diverse perspectives, maintain an open space for idea-sharing, stay curious, and, most importantly, have fun building a vibrant community." Building Bridges, Breaking Barriers Geetha and Ben encourage others to step into the realm of user group leadership, citing the rewarding experience of creating and nurturing a community of like-minded individuals. They highlight the chance to influence, impact, and positively guide others, fostering connections that extend beyond mere technology discussions. Joining a User Group: A Gateway to Growth The leaders stress the importance of joining a user group, emphasizing exposure to diverse perspectives, solutions, and career growth opportunities within the Power Platform community. "Being part of such a group provides a supportive environment for seeking advice, sharing experiences, and navigating challenges." A Year of Milestones Looking back at the past year, Geetha and Ben express pride in the group's growth and global participation. They recount the enriching experience of meeting members in person at the Microsoft Power Platform conference, showcasing the diverse range of perspectives and guest speakers that enriched the community's overall experience. Continuous Learning on the Leadership Journey As user group leaders, Geetha and Ben recognize the continuous learning curve, blending interpersonal skills, adaptability, and dedication to foster a vibrant community. They highlight the importance of patience, persistence, and flexibility in achieving group goals, noting the significance of listening to the needs and suggestions of group members.They invite all tech enthusiasts to join the Dallas Fort Worth Power Platform User Group, a thriving hub where the power of community propels individuals to new heights in the dynamic realm of technology.
This is the TENTH post in our ongoing series dedicated to helping the amazing members of our community--both new members and seasoned veterans--learn and grow in how to best engage in the community! Each Tuesday, we feature new content that will help you best understand the community--from ranking and badges to profile avatars, from Super Users to blogging in the community. Our hope is that this information will help each of our community members grow in their experience with Power Platform, with the community, and with each other! This Week: All About Community Support Whether you're a seasoned community veteran or just getting started, you may need a bit of help from time to time! If you need to share feedback with the Community Engagement team about the community or are looking for ways we can assist you with user groups, events, or something else, Community Support is the place to start. Community Support is part of every one of our communities, accessible to all our community members. Power Apps: https://powerusers.microsoft.com/t5/Community-Support/ct-p/pa_community_support Power Automate: https://powerusers.microsoft.com/t5/Community-Support/ct-p/mpa_community_support Power Pages: https://powerusers.microsoft.com/t5/Community-Support/ct-p/mpp_community_support Copilot Studio: https://powerusers.microsoft.com/t5/Community-Support/ct-p/pva_community-support Within each community's Community Support page, you'll find three distinct areas, each with a different focus to help you when you need support from us most. Community Accounts & Registration is the go-to source for any and all information related to your account here in the community. It's full of great knowledge base articles that will help you manage your community account and know what steps to take if you wish to close your account. ● Power Apps ● Power Automate ● Power Pages, ● Copilot Studio Using the Community is your source for assistance with everything from Community User Groups to FAQ's and more. If you want to know what kudos are, how badges work, how to level up your User Group or something else, you will probably find the answers here. ● Power Apps ● Power Automate ● Power Pages ● Copilot Studio Community Feedback is where you can share opportunities, concerns, or get information from the Community Engagement team. It's your best place to post a question about an issue you're having in the community, a general question you need answered. Whatever it is, visit Community Feedback to get the answers you need right away. Our team is honored to partner with you and can't wait to help you! ● Power Apps ● Power Automate ● Power Pages ● Copilot Studio
What an amazing event we had this year, as Microsoft showcased the latest advancements in how AI has the potential to reshape how customers, partners and developers strategize the future of work. Check out below some of our handpicked videos and Ignite announcements to see how Microsoft is driving real change for users and businesses across the globe. Video Highlights Click the image below to check out a selection of Ignite 2023 videos, including the "Microsoft Cloud in the era of AI" keynote from Scott Guthrie, Charles Lamanna, Arun Ulag, Sarah Bird, Rani Borkar, Eric Boyd, Erin Chapple, Ali Ghodsi, and Seth Juarez. There's also a great breakdown of the amazing Microsoft Copilot Studio with Omar Aftab, Gary Pretty, and Kendra Springer, plus exciting sessions from Rajesh Jha, Jared Spataro, Ryan Jones, Zohar Raz, and many more. Blog Announcements Microsoft Copilot presents an opportunity to reimagine the way we work—turning natural language into the most powerful productivity tool on the planet. With AI, organizations can unearth value in data across productivity tools like business applications and Microsoft 365. Click the link below to find out more. Check out the latest features in Microsoft Power Apps that will help developers create AI-infused apps faster, give administrators more control over managing thousands of Microsoft Power Platform makers at scale, and deliver better experiences to users around the world. Click the image below to find out more. Click below to discover new ways to orchestrate business processes across your organization with Copilot in Power Automate. With its user-friendly interface that offers hundreds of prebuilt drag-and-drop actions, more customers have been able to benefit from the power of automation. Discover how Microsoft Power Platform and Microsoft Dataverse are activating the strength of your enterprise data using AI, the announcement of “plugins for Microsoft Copilot for Microsoft 365”, plus two new Power Apps creator experiences using Excel and natural language. Click below to find out more about the general availability of Microsoft Fabric and the public preview of Copilot in Microsoft Fabric. With the launch of these next-generation analytics tools, you can empower your data teams to easily scale the demand on your growing business. And for the rest of all the good stuff, click the link below to visit the Microsoft Ignite 2023 "Book of News", with over ONE HUNDRED announcements across infrastructure, data, security, new tools, AI, and everything else in-between!
This is the ninth post in our series dedicated to helping the amazing members of our community--both new members and seasoned veterans--learn and grow in how to best engage in the community! Each Tuesday, we feature new content that will help you best understand the community--from ranking and badges to profile avatars, from Super Users to blogging in the community. Our hope is that this information will help each of our community members grow in their experience with Power Platform, with the community, and with each other! Today's Tip: All About the Galleries Have you checked out the library of content in our galleries? Whether you're looking for the latest info on an upcoming event, a helpful webinar, or tips and tricks from some of our most experienced community members, our galleries are full of the latest and greatest video content for the Power Platform communities. There are several different galleries in each community, but we recommend checking these out first: Community Connections & How-To Videos Hosted by members of the Power Platform Community Engagement Team and featuring community members from around the world, these helpful videos are a great way to "kick the tires" of Power Platform and find out more about your fellow community members! Check them out in Power Apps, Power Automate, Power Pages, and Copilot Studio! Webinars & Video Gallery Each community has its own unique webinars and videos highlighting some of the great work being done across the Power Platform. Watch tutorials and demos by Microsoft staff, partners, and community gurus! Check them out: Power Apps Webinars & Video Gallery Power Automate Webinars & Video Gallery Power Pages Webinars & Video Gallery Copilot Studio Webinars & Video Gallery Events Whether it's the excitement of the Microsoft Power Platform Conference, a local event near you, or one of the many other in-person and virtual connection opportunities around the world, this is the place to find out more about all the Power Platform-centered events. Power Apps Events Power Automate Events Power Pages Events Copilot Studio Events Unique Galleries to Each Community Because each area of Power Platform has its own unique features and benefits, there are areas of the galleries dedicated specifically to videos about that product. Whether it's Power Apps samples from the community or the Power Automate Cookbook highlighting unique flows, the Bot Sharing Gallery in Copilot Studio or Front-End Code Samples in Power Pages, there's a gallery for you! Check out each community's gallery today! Power Apps Gallery Power Automate Gallery Power Pages Gallery Copilot Studio Gallery
User | Count |
---|---|
3 | |
2 | |
1 | |
1 | |
1 |
User | Count |
---|---|
7 | |
7 | |
4 | |
2 | |
2 |