SharePoint Content Types In PowerApps Form - A Workaround!

Introduction 

 
Microsoft has not yet provided support to handle SharePoint List Content Types through Power Apps. However, there is still one idea "under review" at Microsoft.
 
SharePoint Modern OOB List form already supports handling of multiple Content-Type forms, but if we want to have a Customized view of the form, then Power Apps doesn't support it yet. Although InfoPath support's it in SharePoint Online, this product is approaching the end of its lifecycle. So, to make it function in Power Apps (similar to SharePoint Modern OOB List Form), here is a custom workaround.
 
Please follow the steps one-by-one as mentioned below. Please note that these steps expect you to have an intermediate level of expertise in Power Apps and Modern SharePoint Online.
 

SharePoint Modern List Configuration

  • Create a modern list named "test" in any of your test site collections.
  • In List Advanced Settings, Allow management of content types.
  • Add one more existing content type as "Comment" to the List (along with the default Item content type)
  • Assign default value “hello” to OOB Title column
  • Add non-mandatory single text column "CustomContentType" for storing Content-Type value (add to all content types, add to default view).
  • Add 3 (non-mandatory) single text columns TestColumn1, TestColumn2, TestColumn3 (add to all content types, add to default view).
  • (The reason that we need to have all columns as non-mandatory columns in SharePoint is that OOB SharePoint save action will not be execute if other Content-Type Power Apps forms have mandatory columns. Instead, we can make needed fields as mandatory in Power Apps)
  • These 4 new columns will be visible in both "Item" and "Comment" List content type
  • Remove "TestColumn2" and "TestColumn3" column from Item List Content Type
  • Remove "TestColumn1" column from Comment List Content Type
  • Open the OOB List new form (of Item Content-Type) and Customize the form in Power Apps
 

Power Apps Configuration

 
Configuring Screens
  • Now in Power Apps, Create Duplicate Screen of the default screen. Duplicate screen form will have the same data source.
  • Rename the Screens to "ContentTypeSPScreen1" and "ContentTypeSPScreen2" respectively.
  • Set formula on "ContentTypeSPScreen1" screen OnVisible property

    Set(varScreenVisible, "1");

  • Set formula on "ContentTypeSPScreen2" screen OnVisible property

    Set(varScreenVisible, "2");
Configuring Forms
  • Rename the Forms to "ContentTypeSPForm1" and "ContentTypeSPForm2" respectively
  • Set both forms default mode as "New"
  • In Forms, Add needed fields of respective OOB content type onto the form:
  • Add Title, TestColumn1 and CustomContentType in Item Form "ContentTypeSPForm1"
  • Add Title, TestColumn2, TestColumn3 and CustomContentType in Comment Form "ContentTypeSPForm2"
  • In "ContentTypeSPForm2" form, make “TestColumn2” as mandatory by Setting "TestColumn2" field "Required" property as true.
  • In CustomContentType field in "ContentTypeSPForm1" form, Set "Update" value as "ddCT1.Selected.CTValue" and Visible as "false".
  • In CustomContentType field in "ContentTypeSPForm2" form, Set "Update" value as "ddCT2.Selected.CTValue" and Visible as "false".
Configuring App OnStart event
 
In the App "OnStart" event, add this code:
  1. Collect(ContentTypeList, {  
  2.     CTId: 1,  
  3.     CTValue: "Item"  
  4. }, {  
  5.     CTId: 2,  
  6.     CTValue: "Comment"  
  7. });  
  8. Set(varScreenVisible, "1");  
  9. Navigate(ContentTypeSPScreen1, ScreenTransition.Fade);  
Configuring dropdown control in the "ContentTypeSPScreen1" screen
  • Add a new label lblCT1 and dropdown ddCT1 controls to screen "ContentTypeSPScreen1".
  • Assign dropdown data source as "ContentTypeList" and assign Value as CTValue.
  • Set "Item" text to "Default" property of "ddCT1" dropdown control
  • Set varResetddCT1 to "Reset" property of "ddCT1" dropdown control
  • Apply formula on ddCT1 "onChange" event,

    If(ddCT1.Selected.CTId = 2, Set(varResetddCT2,true); Navigate(ContentTypeSPScreen2,ScreenTransition.Fade));
Configuring dropdown control in "ContentTypeSPScreen2" screen,
  • Add a new label lblCT2 and dropdown ddCT2 controls to the screen "ContentTypeSPScreen2".
  • Assign dropdown data source as "ContentTypeList" and assign Value as CTValue.
  • Set "Comment" text to "Default" property of "ddCT2" dropdown control
  • Set varResetddCT2 variable to "Reset" property of "ddCT2" dropdown control
  • Apply the formula on ddCT2 "onChange" event:

    If(ddCT2.Selected.CTId = 1, Set(varResetddCT1,true); Navigate(ContentTypeSPScreen1,ScreenTransition.Fade));
Form controls should look like this:
 
 
Configuring "SharePointIntegration"
 
In SharePointIntegration, update the formula in advanced events carefully, as mentioned in the screenshot below:
 
 
Publish Power Apps
 
Save Power Apps and Publish it to SharePoint
 
Test in SharePoint List
 
Now in the SharePoint List, you can select any Content-Type from the OOB New Item dropdown. This doesn't matter as we will select actual content type from our new Custom Power Apps Form.
 
 
Now try saving the "Item" Content-Type form.
 
 
Also, try the "Comment" Content-Type form.
 
 
It should show items in the list, as shown below.
Note
This example is for the "New" form. To Edit the form, you can duplicate screens plus forms and make its default mode as "Edit" and then you can apply some custom logic based on the "CustomContentType" field to edit a particular Content Type form in Power Apps. Also, in this article we considered only 2 content types to give you an idea of how it can be done in Power Apps. You may have multiple content types and logic, which can be replicated in a similar way as described in this article.
 
Happy Learning!