Skapa anpassade program för Workfront med Adobe App Builder

Med Workfront UI Extensions, som bygger på Adobe App Builder, kan kunder och partners skapa anpassade användarupplevelser. Verktygen förbättrar effektiviteten, levererar smidiga, sammankopplade upplevelser och ger avsevärt nöjdare användare samt hjälper företag att förverkliga sin unika vision.

Utan Workfront UI Extensions kan projektledaren behöva växla mellan Workfront och ett separat tidsspårningssystem för att kunna logga timmar. Med UI Extensions kan man integrera tidsspårning direkt i Workfront, effektivisera arbetsflödet och spara tid. Dessutom kan du lägga till anpassade komponenter för att förbättra användbarheten, automatisera repetitiva uppgifter och förbättra innehållshanteringen med funktioner som taggning av metadata och förhandsgranskning av innehåll. Adobe App Builder erbjuder också skalbarhet och robust identitetshantering (IMS), vilket ger säker och effektiv anpassning i alla skalor.

Workfront UI-tillägg har flera viktiga fördelar:

När ett program har skapats i Adobe App Builder kan en Workfront-administratör lägga till det på Workfront huvudmeny och den vänstra navigeringspanelen med hjälp av layoutmallar. En användare med layoutmallen som klickar på programmet ser programmet som inbäddat i Workfront, i stället för att behöva öppna det separat.

I den här artikeln beskrivs hur du får åtkomst till App Builder och använder en mall för att skapa ett program.

Mer information om hur du lägger till ett anpassat program i layoutmallar finns i Anpassa huvudmenyn med en layoutmall och Anpassa den vänstra panelen med en layoutmall.

Förutsättningar

Du måste ha följande:

Öppna Adobe App Builder

Om du vill skapa gränssnittstillägg måste du ha tillgång till Adobe App Builder i Adobe Developer Console.

Ytterligare instruktioner finns på Adobe Developer-webbplatsen.

Lägg till utvecklare i Adobe Admin Console

Få tillgång till App Builder

Organisationer måste samarbeta med sina kontoansvariga för att köpa App Builder.

Om AppBuilder är korrekt konfigurerat bör du se Skapa projekt från mall som en del av skapandet av ett nytt projekt.

Skapa ett nytt projekt i Adobe Developer Console

Du måste använda Adobe Developer Console för att skapa UI-tillägget.

Ytterligare instruktioner finns på Adobe Developer-webbplatsen.

Använd Adobe Developer (aio) CLI

Adobe tillhandahåller en CLI med öppen källkod som du kan använda för att skapa App Builder-programmet.

Ytterligare instruktioner finns på GitHub och Adobe Developer webbplats:

Mer information om mappar och filer i ditt projekt finns på Adobe Developer-webbplatsen.

Bygg tilläggen i VSCode

App.js-filkonfigurationen krävs för att aktivera navigering via Workfront huvudmeny eller sekundär navigering (vänster panel).

Filkonfigurationen ExtensionRegistration.js krävs för att visa tilläggen i Workfront layoutmallar.

I följande exempel visas hur du lägger till anpassade program på huvudmenyn i Workfront och på det vänstra objektets panel med hjälp av gränssnittstilläggen.

Konfigurera ExtensionRegistration.js

Så här tillåter du anpassade program på Workfront huvudmeny:

I funktionen ExtensionRegistration ska du se följande kod. Den här koden skapades för dig av mallen. Den här koden kan läggas till för att skapa ytterligare menyalternativ. Se till att ersätta ID:n och URL:er.

"
mainMenu: {

getItems() {

return [

{

id: 'main-menu-label',

url: '/index.html#/main-menu-label',

label: 'Main menu label',

icon: icon1,

},

];

},

 12}}
"

Tillåt anpassade program i navigeringen i den vänstra panelen i Workfront

Så här tillåter du anpassade program i navigeringen i den vänstra panelen i Workfront:

Bädda in en app med ett anpassat Workfront-formulär

Formulärwidgetens tilläggspunkt är en funktion för gränssnittstillägg i Adobe Workfront som gör att du kan skapa anpassade widgetar som kan bäddas in i Workfront anpassade formulär. Till skillnad från andra tilläggspunkter som lägger till navigeringsobjekt eller menyalternativ, är widgetar ett sätt att visa anpassat innehåll i dedikerade paneler i anpassade formulärfält.

Widgetar är modulära gränssnittskomponenter som kan läggas till i anpassade Workfront-formulär som formulärfält. De ger ett sätt att visa anpassade funktioner, datavisualiseringar eller externt innehåll direkt i anpassade formulärgränssnitt, så att användarna kan interagera med anpassad logik samtidigt som de fyller i formulären.

Konfigurera ett widgettillägg

Precis som UI-tilläggspunkter för huvudmenyn och den sekundära navigeringen, är tilläggspunkten för widgetar konfigurerad i ExtensionRegistration-komponentens metodobjekt, vanligtvis i ExtensionRegistration.js-fältet. Det innebär att det bara krävs att du lägger till ett widgetobjekt i extesionregistration med ett giltigt flöde i din app.js för att använda formulärwidgeten:

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",

      },

    ];

  },

},

Egenskaper för Widget-konfiguration

Obligatoriska egenskaper

Valfria egenskaper

Dimension-egenskaper

Med dimensionsobjektet kan du styra storleken och layoutbegränsningarna för din widget:

Exempel på Dimension-konfigurationer

// 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

{}

Kontextdata

Widgetar har åtkomst till samma delade kontext som andra tilläggspunkter, inklusive:

Lägga till en widget i ett anpassat Workfront-formulär

En app kan bäddas in i ett anpassat Workfront-formulär med fälttypen "UI Extensions". När du har lagt till fältet väljer du en formulärwidget, baseras listan över widgetar på aktiva appar i din IMS-organisation eller lokalt aktiva program när extensionoverride=TRUE.

Konfigurera App.js

Mer information om hur du utvecklar och kör programmet finns på Adobe utvecklarwebbplats.

Delad kontext

Delad kontext används för att dela data från Workfront till ett UI-tillägg. De data som är tillgängliga via delad kontext omfattar användardata och programkontexten.

Användare

Workfront UI Extensions delar användardata. Användarobjektet som är tillgängligt via delad kontext innehåller ett användar-ID för Workfront och användarens e-postadress.

user = (conn?.sharedContext?.get("user")); // {ID: '1', email: 'test@aaa.com'} userID = user.ID userEmail = user.email

Programkontext

När du lägger till ett anpassat program med hjälp av en sekundär navigeringspunkt är det vanligt att det anpassade programmet använder kontextdata som ett projekt-ID eller dokument-ID. För dessa data innehåller den delade kontexten en objektkod och ett objekt-ID.

Här följer ett exempel på hur du hämtar programkontexten för dokument:

context = conn?.sharedContext; // Using the connection created above, grab the document details from the host tunnel. // conn?.host?.document?.getDocumentDetails().then(setDocDetails);

Testa appen i Workfront

När du utvecklar ditt App Builder-program för Workfront kan du behöva testa ditt program i Workfront utan att publicera det.

I din App Builder-app kan du initiera aio app run för lokal utveckling. Detta ger dig en URL, vanligtvis något som https://localhost:9080. Du kan också köra aio app deploy för att erhålla en statisk Adobe-domän. Observera dessa URL:er för framtida bruk.

Navigera sedan till den sida du vill utveckla mot i webbläsaren. Öppna utvecklarverktygen och gå till Lokal lagring för antingen workfront.com eller workfront.adobe.com. Här måste du lägga till en post. Använd extensionOverride som nyckel och den tidigare angivna App Builder-URL:en som värde.

Om konfigurationen slutfördes korrekt visas knapparna från ditt App Builder-program när du läser in layoutmallsidan i Workfront igen. Lägg till appknapparna på huvudmenyn och den vänstra panelen för ett objekt och kontrollera att de visas korrekt i de områdena.

Ytterligare instruktioner finns på Adobe Developer webbplats, med ett exempel från AEM: https://developer.adobe.com/uix/docs/guides/preview-extension-locally/

Publicera ansökningar och godkänn inlämningen

Följ instruktionerna på Adobe Developer-webbplatsen för att publicera och godkänna programmet.