Frontend Editor

Overview

The EFPF SDK Frontend Editor is designed to support the development of custom applications initiated with the EFPF Software Development Kit (SDK) based on the services provided by the EFPF platform. The Frontend main functionality is to provide developers with a graphical user interface (GUI) editor for prototyping, to integrate and customize applications built with the SDK. Developers can combine all microservices based on implementations of the SDK integrated functionalities.

The Frontend can be accessed by the SDK Studio interface using a plain browser. The solution is based on predefined templates that stand for themselves (e.g. customized GUI elements) and can bind data sources from EFPF that are orchestrated by Application Development Studio. Application developers have a high degree of flexibility and power by combining the predefined templates and visual elements that can be used inline or nested. This approach results in a multitude of possible applications designs.

The Frontend UI offers additional guidance and allows developers to speed up the process of rapid prototyping. Any design strategy is supported, and a broad range of applications can result from mixing single-page, multi-page, and progressive web application designs. The workflows are highly configurable translating business process models of the use-case scenarios into functional maintainable applications.

Benefits

  • Create customized applications, user interfaces, webforms and analytic visualizations
  • Easy to use interface
  • Easy customization
  • High degree of flexibility: predefined templates and visual elements that can be used inline or nested
  • No development knowledge needed
  • Requires zero-config code

Service Used

Architecture

The following diagram shows an overview for the Front-end module along with its integration with the EFPF SDK: https://sdk.efpf.caixamagica.pt/dashboard/

Frontend Editor Architecture Figure 1: Frontend Editor Architecture

In order to make use of the Front-end editor, a user should first access a workspace in the SDK, where, after building an application, the exported project is also available.

Frontend Editor FAQ

Can I access the tool through the EFPF portal?

Yes, an EFPF account gives you access to the Frontend Editor services.

Should I download a client program to my device to interact with the Frontend Editor?

No, the Frontend Editor solution is provided as a service. All you need is to login to the EFPF portal.

How can I access the Frontend Editor?

To access the web-based frontend, you need to login in the EFPF platform and launch the SDK web-frontend: https://sdk.efpf.caixamagica.pt/dashboard/

Into the SDK web-frontend Dashboard, you must create a new workspace and open it. Once the workspace is loaded, you can create a new frontend module (right-click on the efShopFloorIntelligence project and select New ð Front-end Module). Immediately after, the Frontend Editor page will be displayed.

How can I create a third-party application by using the Frontend Editor?

The EFPF Frontend Editor allows you to create a third-party web application that contains multiple components which can be shown in-page or placed in tabs. To place a component on the board, you shall simply select the component category (e.g. layout, controls, text, tables, charts) from the menu and click on the respective element.

Which is the expected output?

By using the Frontend Editor, you can create third-party applications and customize your own dashboards to visualize, monitor and analyze information from different datasets. The created applications can be exported and visualized in a web-format.

How do I add a data source API in order to populate different elements?

To add a data source, the user has two options: click on the Add Data Source button in the main menu or select an element from the menu that requires a data source (e.g. Table, Gantt Chart). In both cases, a pop-up will be displayed, allowing users to create data sources. To add a data source, the user must provide a data source name and data source URLs.

What kind of data does the Frontend Editor handle?

The Frontend Editor supports only .json data format. The Gantt chart element is designed for time series data and the Table element is designed to work with any type of data.

How can I export my application?

To export the application, click on the Export button displayed in the bottom of the page and download the project views (within SDK project hierarchy, right-click on the views folder and select Download… ð the views.zip folder will be downloaded locally). To visualize the exported application in a web-format, you shall unzip the views folder and open the index.html file.

Can I modify the content of my application once it has been exported?

Currently no, but we do aim to have this as a feature in the future.