Criando App Plugin Launchpad

Como Criar um Plug-in para o SAP Fiori Launchpad (Guia Prático)

O SAP Fiori Launchpad (FLP) é a porta de entrada para todas as suas aplicações Fiori. Mas, e quando as necessidades do negócio exigem algo além do padrão?

Talvez você precise adicionar um botão no cabeçalho, criar um rodapé personalizado ou até injetar um script JavaScript global. A resposta para isso é simples: Plug-ins do Fiori Launchpad.

Neste guia prático, vou mostrar como criar e configurar o seu próprio plug-in, focando nos ajustes no SAPUI5 e nas transações de backend essenciais (/UI2/FLP_CONF_DEF e /UI2/FLP_CUS_CONF).

1. Ajustando o Projeto SAPUI5

Transformar uma aplicação SAPUI5 comum em um plug-in exige alguns ajustes estruturais. Não basta apenas criar a tela; você precisa "dizer" ao sistema que aquele código é uma extensão do Launchpad.

A. O Ficheiro manifest.json

O passo mais crítico é definir explicitamente que a sua aplicação é um plug-in. Para isso, você deve adicionar a secção sap.flp no seu ficheiro manifest.json.

Veja como fazer:

{
  "_version": "1.65.0",
  "sap.app": {
    "id": "seu.app.nao.mexa",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}"
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.flp": {
    "type": "plugin"
  }
}

B. O Ficheiro Component.js

Ao contrário de uma aplicação normal, um plug-in geralmente não possui Views (vistas) iniciais. A mágica acontece diretamente no Component.js, onde a lógica interage com o renderizador do Launchpad.

Aqui está um exemplo prático de um Component.js que injeta um script JS no Launchpad:

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
    "use strict";
 
    return UIComponent.extend("seu.app.nao.mexa.Component", {
        metadata: {
            manifest: "json",
            interfaces: [
                "sap.ui.core.IAsyncContentCreation"
            ]
        },
 
        init: function () {
            // Chama a função init da classe pai
            UIComponent.prototype.init.apply(this, arguments);
 
            // Evita rodar duas vezes se o FLP recarregar partes
            if (window.JSInjected) {
                return;
            }
 
            this._injectJS();
        },
 
        _injectJS: function () {
            try {
                var sUrl = "https://js-cdn.js.com/example.js";
                
                var docHead = document.getElementsByTagName('head')[0];
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = sUrl;
                script.crossOrigin = "anonymous";
                
                // Opcional: Adicionar atributo async ou defer para não bloquear a renderização
                // script.async = true;
 
                docHead.appendChild(script);
 
                console.log("JS Plugin: Injetado com sucesso.");
                window.JSInjected = true;
 
            } catch (e) {
                console.error("JS Plugin: Erro ao injetar", e);
            }
        }
    });
});

2. Configuração no Backend (S/4HANA)

Feito o deploy da sua aplicação no servidor ABAP, o Launchpad não vai reconhecê-la magicamente. Você precisa registrá-la e ativá-la. Para isso, usaremos duas transações principais.

Passo 1: Definir o Plug-in (/UI2/FLP_CONF_DEF)

Esta transação é usada para a definição técnica do plug-in. Aqui, você diz ao sistema onde encontrar o código que acabou de enviar.

1. Aceda à transação /UI2/FLP_CONF_DEF.
2. Selecione Define Launchpad Plug-Ins e clique em New Entries.
3. Preencha os campos essenciais:
   • FLP Plugin ID: Um identificador único (ex: Z_MY_PLUGIN).
   • UI5 Component ID: O ID definido no seu manifest.json (ex: my.company.plugin).
   • URL: O caminho do serviço ICF onde a app está alojada (ex: /sap/bc/ui5_ui5/sap/zmyplugin).

Nota importante: Esta configuração apenas registra o plug-in no sistema, mas não o torna visível para os utilizadores.

Passo 2: Ativar o Plug-in (/UI2/FLP_CUS_CONF)

Agora que o sistema conhece o plug-in, precisamos ativá-lo. Esta transação serve para a ativação e configuração ao nível do cliente (Customizing). É aqui que você decide se o plug-in deve arrancar ou não.

1. Aceda à transação /UI2/FLP_CUS_CONF.
2. Vá à secção FLP Plugins e clique em New Entries.
3. Insira o FLP Plugin ID que criou no passo anterior (ex: Z_MY_PLUGIN).
4. Defina o Activity State como Active.
5. (Opcional) Se o seu plug-in aceitar parâmetros de configuração, selecione a linha do plug-in e clique em Configuration na árvore à esquerda para adicionar pares chave-valor.

Conclusão

Estender o SAP Fiori Launchpad é uma dança perfeita entre o frontend e o backend.

• No código, o segredo está na entrada sap.flp no manifesto e na lógica implementada no Componente.
• No backend, a regra é clara: a transação /UI2/FLP_CONF_DEF define o que é o plug-in, enquanto a /UI2/FLP_CUS_CONF define se ele está ativo para o cliente atual.

Seguindo estes passos, você desbloqueia um novo nível de personalização, garantindo que o Fiori Launchpad atende exatamente às exigências do seu negócio.

Fonte adicional: SAP Learning - Extending SAP Fiori Launchpad