使用Adobe App Builder為Workfront建立自訂應用程式
由Adobe App Builder支援的Workfront UI擴充功能可讓客戶和合作夥伴建立自訂的使用者體驗。 這些工具可提升效率、提供順暢、連線的體驗，並大幅提升使用者滿意度，協助企業實現其獨特願景。
例如，如果沒有Workfront UI擴充功能，專案經理可能需要在Workfront和單獨的時間追蹤系統之間切換以記錄時數。 有了UI擴充功能，可直接將時間追蹤整合到Workfront體驗中，藉此簡化工作流程並節省時間。 此外，您可以新增自訂元件，以提升可用性、自動化重複工作，並透過如中繼資料標籤和內容預覽等功能，增強內容管理。 Adobe App Builder也提供擴充能力及強大的身分管理(IMS)，確保安全且有效率的自訂，規模不限。
Workfront UI擴充功能提供幾個主要優點：
- 精確自訂：標準軟體介面通常無法滿足所有業務需求。 UI擴充功能可讓開發人員修改及擴充預設使用者介面，以滿足特定業務需求。
- 系統整合： UI擴充功能可促進其他系統的整合，確保順暢的工作流程與資料一致性。
- 擴充性：隨著企業成長，可以開發UI擴充功能來新增功能，而不需要徹底的系統檢修。
- 縮短開發時間：預先建立的擴充功能點和工具，大幅減少實施自訂功能所需的時間和精力。
- 增強使用者採用率：最佳化的使用者體驗可大幅提升軟體採用率。 為符合使用者偏好設定而設計的自訂UI元素可以提高採用率和整體滿意度。
- 運用Workfront UI擴充功能，企業可建立量身打造的使用者體驗，藉以提高效率、整合和使用者滿意度。
在Adobe App Builder中建立應用程式後，Workfront管理員可以使用版面配置範本將其新增到Workfront主功能表和左側導覽面板。 具有版面配置範本的使用者按一下應用程式後，會看到內嵌在Workfront中的應用程式，而不必另外開啟。
本文說明如何存取App Builder並使用範本建立應用程式。
如需將自訂應用程式新增至版面配置範本的相關資訊，請參閱使用版面配置範本自訂主功能表和使用版面配置範本自訂左側面板。
先決條件
您必須具備下列條件：
- 啟用IMS的Workfront帳戶
- 具有節點v18和npm的開發機器
- App Builder授權
存取Adobe App Builder
若要建立UI擴充功能，您必須能在Adobe Developer Console中存取Adobe App Builder 。
Adobe Developer網站提供其他指示。
將開發人員新增至Adobe Admin Console
-
導覽至生產環境： https://adminconsole.adobe.com/
-
在 使用者 區段中，按一下 開發人員 > 新增開發人員。
note note NOTE 如果您看不到管理開發人員的選項，表示您沒有允許開發人員存取的產品。 -
新增使用者的電子郵件。 它應搜尋已從Admin Console中新增的現有使用者。
-
將必要的產品新增至開發人員設定檔，然後按一下[儲存]。
存取App Builder
組織必須與其客戶經理合作，才能購買App Builder。
如果AppBuilder已正確設定，您應該會在建立新專案時看到從範本建立專案。
在Adobe Developer Console中建立新專案
您必須使用Adobe Developer Console來建置您的UI擴充功能。
Adobe Developer網站提供其他指示。
-
使用您的Adobe ID登入Adobe Developer Console 。
-
選擇您的帳戶，以及您的設定檔或組織。
-
按一下[快速入門]區域中的[從範本建立專案] ，或按一下[從範本建立新專案] >[從範本建立專案]。
note important IMPORTANT 如果您沒有看見從範本建立專案的選項，表示您在Admin Console中的設定錯誤，且無權存取App Builder目錄。 只有在您有權存取AppBuilder時，才會顯示此選項。 
-
選取 App Builder。
-
輸入 專案標題 和 應用程式名稱。 兩者都有預設值，但如果您自訂值，稍後更容易識別您想要的專案。
-
保留 包含執行階段 已選取。
-
按一下「儲存」。
使用Adobe Developer (aio) CLI
Adobe提供開放原始碼CLI，可用來建立App Builder應用程式。
GitHub和Adobe Developer網站上提供其他指示：
- https://github.com/adobe/aio-cli
- https://developer.adobe.com/app-builder/docs/getting_started/first_app/
-
若要安裝工具，（請先確定您位於節點v18）執行：
npm install -g @adobe/aio-cli。 -
啟動您的終端機，並使用下列命令登入AIO：
aio login。 如果您無法登入正確的IMS組織，請嘗試aio login -f強制登入提示。 使用aio where檢視您登入正確的IMS組織的組織。 如需詳細資訊，請使用aio config。 -
透過執行
aio app init example-app開始設定您的應用程式，請務必將「example-app」取代為您的應用程式名稱。 如果您不確定應用程式名稱，可以使用命令aio console project list檢視應用程式名稱清單。 -
從提供的選項中選取您的組織和專案。
-
瀏覽所有可用的範本，並為您的專案選擇 @adobe/workfront-ui-ext-tpl。
-
選取並輸入您在Adobe Developer Console中建立的專案名稱。
-
回應應用程式的提示：
- 為擴充功能命名。
- 提供擴充功能的描述性摘要。
- 選取要開始使用的初始版本編號。
- 如果您在提示「您接下來想要做什麼？」時選取「將自訂按鈕新增至主要功能表專案」，範本會建立主要導覽按鈕的程式碼。
-
選取「我已完成」以確認完成。 正在從範本產生程式碼。
-
等到您看到應用程式初始化完成的訊息為止。 然後，您可以在IDE中開啟專案（建議使用Visual Studio Code）並存取src資料夾。
如需專案中資料夾和檔案的詳細資訊，請參閱Adobe開發人員網站。
如需專案中資料夾和檔案的詳細資訊，請參閱Adobe Developer網站。
在VSCode中建置擴充功能
透過Workfront主功能表或次要導覽（左側面板）啟用導覽時，需要App.js檔案設定。
必須有ExtensionRegistration.js檔案設定，才能在Workfront配置範本中顯示擴充功能。
下列範例說明如何使用UI擴充功能，將自訂應用程式新增至Workfront主功能表和物件的左側面板。
設定ExtensionRegistration.js
若要在Workfront主功能表中允許自訂應用程式：
- 前往ExtensionRegistration.js。
在ExtensionRegistration函式中，您應該會看到下列程式碼。 範本已為您建立此程式碼。 可以新增此程式碼以建立其他功能表專案。 請務必取代ID和URL。
"
mainMenu： {
getItems() {
return [
{
id： 'main-menu-label'，
url： '/index.html#/main-menu-label'，
label： 'Main menu label'，
icon： icon1，
}，
]；
}，
}
"'
-
新增下列程式碼片段：
此範例顯示主要功能表專案。 您必須將ID、標籤、圖示和URL更新為您的應用程式正確的名稱。 新增多個專案時，請確定ID是唯一的。 -
儲存您的工作。
在Workfront左側面板導覽中允許自訂應用程式
若要允許在Workfront左側面板導覽中使用自訂應用程式：
-
前往ExtensionRegistration.js。
-
在ExtensionRegistration函式中，新增下列程式碼片段：
code language-none secondaryNav: { TASK: { getItems() { return [ { id: "TASK", label: "My TASK", icon: metricsIcon, url: "/myTask", }, ]; }, }, },
-
此範例顯示名為「我的任務」的左側面板導覽專案。 您必須將ID、標籤、圖示和URL更新為您的應用程式正確的名稱。
-
此範例顯示Project物件型別的左側面板導覽專案。 您必須針對Workfront支援的每個物件分別建立這些專案。 下列物件可供使用：專案、任務、問題、投資組合和方案。
-
-
儲存您的工作。
使用Workfront自訂表單內嵌應用程式
表單Widget擴充功能是Adobe Workfront中的UI擴充功能，可讓您建立可內嵌於Workfront自訂表單中的自訂Widget。 不同於其他新增導覽專案或功能表選項的擴充點，Widget提供在自訂表單欄位的專用面板中顯示自訂內容的方式。
Widget是模組化UI元件，可作為表單欄位新增到Workfront自訂表單中。 它們提供直接在自訂表單介面中顯示自訂功能、資料視覺效果或外部內容的方法，讓使用者在填寫表單時可與自訂邏輯互動。
設定Widget擴充功能
如同主要功能表和次要導覽的UI擴充點一樣，「Widget」擴充點通常會在ExtensionRegistration欄位的ExtensionRegistration.js元件的methods物件中設定。 這表示使用表單Widget只需要在app.js中以有效路徑在extesionregistration中新增「Widget」專案：
javascript
Apply to ExtensionReg...
widgets: {
getItems() {
return [
{
id: "test2",
url: "/index.html#/widgets1",
label: "Test Widget with dimensions",
dimensions: {
height: 450,
width: 300,
maxHeight: 600,
maxWidth: 400,
},
},
{
id: "test",
url: "/index.html#/widgets1",
label: "Test Widget without dimensions",
},
];
},
},
Widget設定屬性
必要的屬性
-
id （字串）： Widget的唯一識別碼。 擴充功能中所有的Widget必須是唯一的。
-
url （字串）：指向Widget內容的URL路徑。 這應該指向延伸模組中的路由，該路由會轉譯Widget元件。
-
標籤（字串）：顯示在自訂表單欄位選擇介面中的Widget顯示名稱。
選擇性屬性
-
維度（物件）：指定Widget的顯示維度。 所有屬性都是選用的，可能只有這些維度：
-
高度（數字）：Widget的高度（畫素）
-
寬度（數字）：Widget的寬度（畫素）
-
maxHeight (number)：以畫素為單位的Widget最大高度
-
maxWidth （數字）：Widget的最大寬度（畫素）
Dimension屬性
維度物件可讓您控制Widget的大小和版面配置限制：
-
高度和寬度：設定Widget的初始/偏好大小
-
maxHeight和maxWidth：設定上限以防止Widget變得太大
-
回應式行為：Widget可以在這些限制中回應
-
表單整合：維度可協助確保Widget符合表單欄位佈局
Dimension設定範例
// Fixed size widget
dimensions: {
height: 300,
width: 250,
}
// Flexible height with width constraint
dimensions: {
width: 300,
maxHeight: 500,
}
// Height constraint only
dimensions: {
height: 400,
maxWidth: 350,
}
// No dimensions - uses default sizing
{}
內容資料
Widget可存取與其他擴充點相同的共用內容，包括：
-
驗證：包含IMS權杖的驗證資訊
-
物件代碼：物件型別代碼（任務、專案、問題等）
-
物件ID：物件識別碼
-
主機名稱： Workfront執行個體主機名稱
-
通訊協定：連線通訊協定
-
使用者：目前的使用者資訊
-
isLoginAs：使用者是否以其他使用者的身分登入
-
isInBulkEditing：如果表單目前處於大量編輯模式。 若是如此，則內容會包含「物件ID」的多個值。
將Widget新增至Workfront自訂表單
使用「UI擴充功能」欄位型別，可將應用程式內嵌於Workfront自訂表單中。 新增欄位後，選取表單Widget，Widget清單會根據IMS組織中的作用中應用程式或本機作用中應用程式（當extensionoverride=TRUE時）。
自訂表單中的
設定App.js
-
前往App.js。
-
此範本將成為「主要功能表」選項的路由。 路由會定義URL路徑與針對這些路徑演算的元件之間的對應。 若要新增路由，請使用下列程式碼片段，請務必以您的程式碼片段取代確切的路徑和元素。
code language-none <Route exact path="custom-application" element={<Customapplication />} />
-
儲存您的工作。
如需開發及執行應用程式的詳細資訊，請參閱Adobe開發人員網站。
共用內容
共用內容可將資料從Workfront共用至UI擴充功能。 透過共用內容可用的資料包括使用者資料和應用程式內容。
使用者
Workfront的UI擴充功能會共用使用者資料。 可透過共用內容使用的使用者物件包含Workfront使用者ID和使用者的電子郵件地址。
user = (conn?.sharedContext?.get("user")); // {ID: '1', email: 'test@aaa.com'} userID = user.ID userEmail = user.email
應用程式內容
使用次要導覽擴充功能點新增自訂應用程式時，自訂應用程式通常會使用內容資料，例如專案ID或檔案ID。 對於這些資料，共用內容包含物件程式碼和物件ID。
以下是取得檔案應用程式相關資訊環境的範例：
context = conn?.sharedContext; // Using the connection created above, grab the document details from the host tunnel. // conn?.host?.document?.getDocumentDetails().then(setDocDetails);
在Workfront中測試應用程式
針對Workfront開發App Builder應用程式時，您可能需要在Workfront中測試應用程式而不發佈。
在您的App Builder應用程式中，您可以啟動aio app run以進行本機開發。 這可提供您一個URL，通常類似於https://localhost:9080。 或者，您可以執行aio app deploy以取得靜態Adobe網域。 請務必記下這些URL以供日後使用。
接下來，導覽至您要在瀏覽器中針對其開發的特定頁面。 開啟開發人員工具，並存取workfront.com或workfront.adobe.com的本機儲存空間。 您必須在此新增專案。 使用extensionOverride作為索引鍵，使用先前註明的App Builder URL作為值。
如果設定正確完成，當您在Workfront中重新載入版面配置範本頁面時，您將會看到App Builder應用程式的按鈕。 將應用程式按鈕新增至物件的主要功能表和左側面板，並確認它們是否正確顯示在這些區域中。
Adobe Developer網站上提供其他指示，使用AEM的範例： https://developer.adobe.com/uix/docs/guides/preview-extension-locally/
發佈應用程式並核准提交
若要發佈並核准應用程式，請依照Adobe Developer網站上的指示操作。