Trying to open the Files dialog box from a button on a Catalog item in Modern UI SSP

PJ303000.ts has code to run this. And so PJ303000.html will have the other parts.

You’re missing NoteMenuDataComponent in your import {} section at the top of your .ts file. Try adding that before looking at the PJ files (because they do it slightly differently than what the UI Components documentation says).

@Joe Schmucker Django's right on both counts. NoteMenuDataComponent comes from "client-controls", the same way PJ303000 brings it in. That clears the NoteMenuDataComponent errors.

The activeScreenVM error is a different problem. That property belongs to the side panel control (QpSidePanelCustomElement), so it won't resolve on a PXView. On a screen you go through screenService, and that lives on PXScreen, not PXView. Move filesShow() out of InventoryItemView_ICSJoePortal_generated and into SP504001_ICSJoePortal_generated. Stock SM200505_Excel calls this.screenService from an extension class shaped just like yours. This is PJ303000's version:

async showFiles() {
    await (<NoteMenuDataComponent> this.screenService.getDataComponent("NotesMenuData"))?.filesShow();
}

Before you hang it on the card, check what the dialog points at. filesShow() opens it against the screen's primary view. On SP504001 that's FilteredItems, which is an SPInventoryItem projection. In 26R1, SPInventoryItem has no NoteID field, and files attach through a PXNote NoteID. The item's own files sit under InventoryItem.NoteID, which is where the catalog's image join reads them. INSiteStatusSelected maps it with [PXNote(BqlField = typeof(InventoryItem.noteID))].

​@Steve Milner Thanks for sharing all that knowledge.  ​@Django Thank you as well!

The button on my screen opens an action.  I am able to get the inventory ID inside that action through the adapter.  So at least I can pull the noteID for the inventory item to add a file.  Maybe I need to create my own custom panel to get the file from the customer and use my action to manually add the file to fileupload etc.  As you pointed out, the base screen is going to try to add a file to that screen which doesn’t really exist.

I don’t know how complicated it would be to create a panel to all the user to upload a file into memory so I can save it manually.  Does that even sound possible to you???

I got it.  Using the topic here: 

I was able to make some changes to get it to work.  One major thing I had to do was add a NoteDoc record manually.  I think this is basically a highjack from the Projects file upload mechanism.

Thanks guys for all your help!

Here is my final working code:

using PX.Common;
using PX.Data;
using PX.Data.BQL;
using PX.Data.BQL.Fluent;
using PX.Objects.CS;
using PX.Objects.IN;
using PX.Objects.Portals.SP.DAC;
using PX.SM;
using System.Collections;
using System.Linq;

namespace PX.Objects.Portals
{
	public class ICSSPCatelogMaintExt : PXGraphExtension<SPCatalogMaint>
	{
		public static bool IsActive() => PXAccess.FeatureInstalled<FeaturesSet.modernPortalModule>();

		public PXSelect<InventoryItem> InventoryItemView;
		public PXSelect<NoteDoc> NoteDocView;

		public PXFilter<ProjectListUploadPanel> UploadPackagePanel;

		#region Event Handlers
		public PXAction<SPInventoryItem> UploadFile;
		[PXButton(Category = "Import", DisplayOnMainToolbar = true)]
		[PXUIField(DisplayName = "Import")]
		protected IEnumerable uploadFile(PXAdapter adapter)
		{
			return ImportPackage(adapter, null);
		}

		private IEnumerable ImportPackage(PXAdapter adapter, string projectName)
		{
			PXContext.Session.SetString("UploadProjectMode", projectName);
			if (UploadPackagePanel.AskExt() != WebDialogResult.OK)
				return Enumerable.Empty<object>();
			FileInfo info = PXContext.SessionTyped<PXSessionStatePXData>().FileInfo["ProjectList_UploadPackage"];
			OnUploadPackage(info, adapter);
			return adapter.Get();
		}

		public bool OnUploadPackage(FileInfo info, PXAdapter adapter)
		{
			if (info != null)
			{
				UploadFileMaintenance upload = PXGraph.CreateInstance<UploadFileMaintenance>();
				try
				{
					upload.SaveFile(info, FileExistsAction.CreateVersion);
				}
				catch (PXNotSupportedFileTypeException exc)
				{
					throw new PXException(
							// Acuminator disable once PX1050 HardcodedStringInLocalizationMethod [Justification]
							"Unsupported Format");
				}


				SPInventoryItem row = adapter.Get<SPInventoryItem>().FirstOrDefault();
				if (row != null)
				{
					InventoryItem inventory = SelectFrom<InventoryItem>.Where<InventoryItem.inventoryID.IsEqual<@P.AsInt>>
						.View.Select(Base, row.InventoryID);
					if (inventory != null)
					{
						PXCache myCache = this.InventoryItemView.Cache;
						PXCache myNoteDocCache = this.NoteDocView.Cache;

						if (myCache != null) 
						{
							PXNoteAttribute.SetFileNotes(myCache, inventory, info.UID.Value);

							NoteDoc noteDoc = new NoteDoc()
							{
								FileID = info.UID.Value,
								NoteID = inventory.NoteID
							};
							NoteDocView.Update(noteDoc);

							myNoteDocCache.Persist(PXDBOperation.Insert);


						}
					}
				}

			}
			return true;
		}
		#endregion
}

<template>
    <qp-button id="btnUploadFileAction" icon="upload" caption="Upload File" class="sp-add-to-cart" state.bind="FilteredItems.UploadFile" after="#fsCatalog"></qp-button>


    <qp-upload-dialog id="UploadPackageDlg"
                      key="UploadPackagePanel"
                      session-key="ProjectList_UploadPackage"
                      caption="Upload Files"
                      allowed-types=".zip,.xlsx,.pdf">
    </qp-upload-dialog>
</template>

import {
	PXView,
	PXActionState,
} from "client-controls";
import { SP504001 } from "src/screens/SP/SP504001/SP504001";
//import { CatalogScreen } from "src/screens/SP/sp-base";
import { InventoryItemView } from "src/screens/SP/catalog/view-models";
//import { InventoryItem } from "../../../../../screens/IN/IN504000/IN504000";
//import { InventoryItemView } from "src/screens/SP/catalog/view-models";

export interface SP504001_ICSJoePortal_generated extends SP504001 { }
export class SP504001_ICSJoePortal_generated { }

export interface InventoryItemView_ICSJoePortal_generated extends InventoryItemView { }
export class InventoryItemView_ICSJoePortal_generated extends PXView {
	UploadFile: PXActionState;
}

The file was successfully uploaded to the inventory item!