Tag Archives: Angular JS in InDesign

Using AngularJS Integration for Adobe’s Common Extensibility Platform (CEP) Extensions

CEP Extensions are the preferred way for developers to extend Adobe CC applications. In an earlier article, we presented an overview and some tips on migrating plug-ins to CEP extensions This article presents the case study from integrating Angular JS in CEP extensions.

Design Principle

In an era of mobile applications, the user now expects everything available in single page, and wants to accomplish everything without making much effort. All the server interaction should be invisible to user. Like conventional websites, there’s no room for page reloads, page transitions etc.

Therefore, as far as possible, we recommend that all CEP Extensions should be Single Page Application. We can achieve this by using Angular JS framework as described below.

Angular JS

AngularJS, commonly referred to as Angular, is an open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications.
Read More…

Why AngularJS is best choice for your CEP Extension?

Angular provides:

  • 1. MVC Framework : With Angular, you can architect your extension in MVC pattern. Views present the data in various DOM elements and Controllers are the behavior behind the DOM elements. You don’t have to worry about registering callbacks or watching model changes.
  • 2. Two-way data binding : Suppose, your extension needs to update the user with some information. Angular makes it very easy to update the view when the model changes and update the model when the view changes. So, you won’t have to worry about DOM manipulations from now!
  • 3. Routing : Your extension is getting more complex. Is it involving multiple pages? No Problem.
    With Angular, you can provide different routes to your extension (via a service called `$routeProvider`). This routing service makes it very easy to wire together controller, views and templates. For e.g., you want to move from A.html (having A_controller as it’s controller file) to B.html (B’s controller is B_controller). As soon as you route to B, its controller will take over the execution from A_controller.
  • 4. Services : Okay, MVC and routing are fine. But you want to share some functionality across multiple views. Can Angular help you?

Yes. Angular Services are the singleton objects that you can use to organize and share code across your extension. To use an Angular service, you add this service as a dependency for the components that need the service (This is called dependency Injection).

Here is the architecture of an extension that we have developed using AngularJS


Business Case

We were required to develop an extension wherein :

  • 1. A user can login into the extension.
  • 2. His project list stored at the cloud will be fetched.
  • 3. He can tag these projects to the documents.
  • 4. As he works on the document, his activities will be recorded and stored to the cloud against the selected project.
  • 5. When he changes the document, the associated project will automatically be changed.
  • 6. Next time when he opens the document or takes that document to a different location, the project association will remain intact with the document and can log his activity from there.
  • 7. Add or edit the project details like name, colour code etc.
  • 8. Last but not the least, it needs to be supported by Photoshop, InDesign, Illustrator, InCopy and Premiere Pro.
Benefits observed and time saved

In above scenario, the main advantage that Angular has given us is the decoupling of different components of the extension into views (and their controller). For example, we have created separate views-controller pairs for Login, Project List, Create/Edit project. This makes testing, debugging and code-maintenance very easy. Background tasks like tagging a document, observing the user activities were implemented using the services.

So, later on when we need to extend the functionality for other apps, there was no need to touch the views that were independent of the apps like login page, project listing etc. We only added the services of the dependent components. For example, tagging a document is implemented differently in Photoshop than in Illustrator, so we just added the service for it and whoa, our extension was ready for a new app! Furthermore, due to lazy initialization of the services, the appropriate service came into play only when it was required.

Benefits of Why Adobe LiveCycle Forms

These days, increasing number of enterprises are using e-forms to perform many important tasks and achieve results. These forms can include simple forms where users are required to leave their email address and a message to multi-page complex forms that include calculations and logic. Though most of the e-forms are designed in HTML along with JavaScript, many other technologies such as Adobe LiveCycle forms are becoming popular.

Adobe LiveCycle Designer is a desktop tool that allows you to create and deploy the dynamic and interactive forms based upon XML forms. This Adobe designer is a WSIWYG tool where you are just required to drag and drop the fields onto the form. This tool also provides features to bind form fields into data sources including web services, XML Schema, and ODBC data providers. It helps the developers to integrate the visual designing process to integrate smoothly with existing data infrastructures and enterprise technologies.

After the template is ready, Adobe LiveCycle Forms can create output form as HTML and PDF like a PDF form designer. In addition, you can merge the existing enterprise data and data from other applications before presenting it to the users. Besides its capabilities of form creation and data merging, it offers various other features such as data extraction from submitted PDF. Moreover, it also allows server side processing for data.

There are many advantages of Adobe LiveCycle forms. They can capture data in the most useful way from the internal as well as external users. It can deliver to any browser, remove delay if manual processing and routing, reduces the expensive costs of gathering paper-based information. In addition, it improves the data consistency and accuracy by reducing the possible human errors. It can integrate with existing enterprise applications and data infrastructure. The most important thing is you need not touch even a single desktop for deploying forms in the entire enterprise.

LiveCycle forms can be used in various daily life applications such as travel request and approval, application for services and benefits, and expense management. More such applications include loan applications that communicate with back end systems, customized solutions for online insurance, and survey portals for your audience and more.

In the LiveCycle form designer, the form is viewed to comprised of three sections; the graphical layout of the form, the form scripts and a hierarchical structure of logical form elements. While form layout is created by drag and drop, the elements are selected from a library in the Designer which contains all the elements and fields normally found on the forms such as text fields, radio buttons, checkboxes and drop-down lists, and selection of graphical and structural elements like lines, curves, image fields and tables. You can create dynamic forms by using JavaScript for the form elements.

Know about the Capabilities of Adobe LiveCycle forms

Adobe LiveCycle forms is the excellent applications introduced by Adobe under its ES2 module. While searching for a reliable, cost-effective and secure application to extend our core business processes, I found this application very suitable to our enterprise’s requirements. Once I started exploring this option, I become fond of it. I can use it as PDF form designer or can create and deploy XML-based templates as HTML forms or as Flash guided experience. If you are interested in such an excellent application, read more.

The Adobe LiveCycle forms applications can be easily accessed using Adobe Reader® or Flash® Player software or web browsers. You can use to capture data and integrate it directly into the back-end systems of your organization and streamlining format-driven business processes. In addition, it also help s improves the data accuracy.

Let me count a few important capabilities of this LiveCycle forms designer. It can create and deploy form templates immediately without any hassles. Moreover, it can process form templates. This Adobe application offers an enhanced used experience with its dynamic forms and guides.  In addition, it can integrate with many LiveCycle modules.

Along with Adobe LiveCycle Forms ES2 comes the Adobe LiveCycle Designer ES2 or the PDF form designer. It has the graphical design features that can design and organize forms which can be used to create the exact look and feel that is seen in paper-based forms.

These forms have several components that make it easy for the designers to integrate all the elements required in a real life form. These components include fields, objects, and scripts packaged and all these can be packaged together to make a reusable component such as address block or financial information sections. Using prebuilt form fragments or the collection of the components make it easy to quickly create new forms. In addition, it automatically changes in the forms that affect the global fragments. Another advantage of using this application is you can combine many PDF forms into a single PDF form packages to make it easy for the users to quickly access the required forms for their transactions.

These days, most enterprises are making use of e-forms for all purposes. By providing e-forms with improved user experience, they can exact faster response time and lower exit rate. The LiveCycle forms can provide more enhanced user experience to the end users which keep them stay on the page. Deploying the e-forms designed with Forms ES2 can make it more convenient for the users than traditional forms.  In addition, you can provide better user experience by deploying the wizard-like guides to help the user through the process of data capture. Designers can design high level guided experiences with the help of an intuitive WYSIWYG guide builder that uses a common data model. It helps them reducing the length of code and simply the data integration.

All the Adobe LiveCycle ES2 modules have provided support for XML. Similarly, LiveCycle Forms also support XML. It helps you integrate forms quickly with your existing enterprise applications. In addition, you can also exchange quickly the data with core business systems. Using PDF form designer, you can easily and quickly embed PDF forms with content and data from key applications. Moreover, it will automatically verify information using add calculations and validations while the user completes the form.

Furthermore, it offers the features for returning the captured data to main applications using SOAP-based interfaces.  It helps in making your existing applications more useful and hence better ROI. It helps speed up the processing time and reduces the possible human errors.

The Adobe LiveCycle Forms integrate not only with your existing applications but also with other LiveCycle modules which helps you increase the functionality and utility of your forms automation solutions.  For instance, if you are using Adobe LiveCycle Digital Signatures ES2, you can use it beyond firewall. Similarly, you can use Adobe LiveCycle Process Management ES2 to automate the business processes that make use of forms. In addition, Adobe LiveCycle Reader® Extensions ES2 can be used if you want users to fill forms offline and mail or fax the completed forms with dynamic barcode technology.

The Adobe LiveCycle Form is designed in the Adobe LiveCycle Designer. The form has three main parts; the graphical layout, a hierarchical structure of logical form elements and the form scripts. Built on J2EE, it can easily integrate with all the existing enterprise infrastructures.