- Overview
- Best practices to follow
- Setting up OKTA authentication with AEM Author
- Creating your first Adaptive Form
- 1 - Introduction and Setup
- 2 - Create Adaptive Form template
- 3 - Create form fragment
- 4 - Create Adaptive Form
- 5 - Configuring root panel and adding child panels
- 6 - Adding components to People panel
- 7 - Adding table to income panel
- 8 - Configuring assets panel
- 9 - Using custom functions and code editor
- Handling Form Submissions
- Useful Integrations
- Creating OSGi bundle
- Adaptive Forms
- Installing AEM Forms on Windows
- Installing 32 bit packages on Linux
- Prefill Service in Adaptive Forms
- Populate Adaptive Form using query parameters
- Custom Submit in Adaptive Forms
- Captcha in Adaptive Forms
- Custom Functions in Rule Editor
- Embedding Adaptive Form in web page
- Creating array of strings
- Item Load Path in AEM Forms
- Using Set Value in XML in OSGI Workflow
- Using Set Value in JSON in OSGI Workflow
- Send Email Component in AEM Forms Workflow
- Generating DocumentOfRecord using API
- Displaying Inline Images
- Displaying DAM images inline
- Using GeoLocation API
- Using Transaction Reporting
- User Profile Data Integration in AEM Forms
- Microsoft Dynamics with AEM Forms
- Rule Editor Enhancements
- Restricting Access to Rule Editor
- Theme Editor Enhancements
- Form Editor Enhancements
- Automated Testing Of Adaptive Forms
- Automated Testing Of Adaptive Forms
- Integrating LDAP with AEM Forms
- Using Service User in AEM Forms
- Tagging and Storing DoR on Adaptive Form Submission
- Populating table with the results from Form Data Model Service Invocation
- Capturing workflow comments
- Storing Submitted Form Data in DB
- Inserting form attachment in DB
- Modify Data Source Configuration
- Override Form Data Model Properties
- Form Data Model Service in AEM 6.4 Workflow
- Handling Error Messages in Form Data Model Service Step
- Form Data Model Service in AEM 6.5.1 Workflow
- Form Data Model without Data Source
- Computed Form Data Model Element
- Setting up JDBC Data Source in AEM Forms
- JDBC Based Form Data Model
- Create Associations between 2 entities in Form Data Model
- Using Form Data Model’s invoke service in Rule Editor
- Post Binary Data to AEM DAM Using Form Data Model
- Creating Re-Usable Workflow Models
- Custom Process Step AEM Workflow
- Pre-Populating HTML5 Forms
- Form Data Model with Salesforce
- Adding Items Dynamically to Choice Component
- Select and assemble DAM folder content
- Prefilling adaptive form using form data model
- UI Tips and Tricks
- Customizing inbox
- Email form attachments
- Storing and Retrieving Adaptive Form
- Exporting Submitted Data in CSV Format
- HTML5 Forms
- AEM Forms and Acrobat Sign
- Introduction
- Set up SSL
- Create Acrobat Sign API Application
- Create Acrobat Sign Cloud Configuration
- Create Workflow to send document for signing
- Create and Configure Adaptive Form
- Configure Adaptive Form for single signer
- Configure Adaptive Form for two signers
- Configure Automated Forms Conversion Service
- Convert PDF Form into Adaptive Form
- Configure converted Adaptive Form
- Using XDP templates with Acrobat Sign
- Sign Multiple Forms
- Custom workflow steps
- Custom workflow component
- Variables in AEM Workflow
- Review form data
- Storing and Retrieving Form Data in MySQL DB
- Triggering AEM Workflow from Mobile Form submission
- Querying Submitted Data
- Listing Custom Asset Types in Forms Portal
- AEM Forms With Marketo
- AEM Forms with Adobe Campaign Standard
- Welcome Kit
- Headless Forms API
- React App with Forms and Acrobat Sign
- Document Services
- Types of PDF forms
- Embed pdf in adaptive form
- PDF’s in carousel component
- Using Assembler Service in AEM Forms
- XDP Stitching with Assembler Service
- Using Watched Folder in AEM Forms
- Using Barcode Service in AEM Forms
- Using PDFG Service in AEM Forms
- Using Output and Forms Service in AEM Forms
- Using xdp fragments in output service
- ECMA script to generate pdf with fragments
- Generating multiple pdf’s from one data file
- Generate PDF on Mobile Form Submission
- Generate Interactive PDF from Mobile Form
- Generate Interactive DoR from Adaptive Form
- Configure Reader Extensions Credential
- Apply Usage Rights to PDF on XDP Rendition
- Apply Usage Rights to Uploaded PDF
- Certify Documents
- Assemble Form Attachments
- Useful Utility Services
- Interactive Communications for Print Channel
- 1 - Introduction
- 2 - Set up Tomcat
- 3 - Create Data Source
- 4 - Create Form Data Model
- 5 - Create XDP Layout using Forms Designer
- 6 - Create Document Fragment
- 7 - Create Print Channel Document
- 8 - Adding Content to Target Areas
- 9 - Configuring Line Chart
- 10 - Adding Table to Print Channel
- 11 - Using Watched Folder to Generate Documents
- 12 - Opening Agent UI on Form Submission
- Save and Retrieve Draft Letters
- Interactive Communications
- Using Batch API
- MultiSeries Charts
- Generate Print Channel Documents From Submitted Data
- Using Reducer Functions
- Two Column Layout in Print Channel Documents
- Using Table Component in AEM Forms Print Channel Document
- Generating Interactive Communications Document for Print Channel using Watch Folders
- Customize text editor
- Interactive Communications For Web Channel
- 1 - Introduction
- 2 - Set up Tomcat
- 3 - Create Data Source
- 4 - Create Form Data Model
- 5 - Creating Web Channel Document Template
- 6 - Creating Document Fragment
- 7 - Creating Interactive Communication Document
- 8 - Adding Text and Images
- 9 - Configuring Line chart
- 10 - Configuring Table
- 11 - Configuring Column Chart
- 12 - Configuring Pie Chart
- 13 - Delivery Of Web Channel Document
- Email Delivery of Web Channel Document
- Troubleshooting
- Document Services: Steps to troubleshoot DDX related issues
- Document Services: Steps to troubleshoot PDFA conversion issues
- Document Services: How to debug font related issue for Forms and Output Service
- Document Services: How to embed fonts for Forms and Output Service
- Document Services: How to enable performance logging to debug Forms and Output Service
- Document Services: How to increase aries transaction timeout for conversion of large files
- Document Services: How to run load tests using FormsIVS and OutputIVS
- Document Services: How to update custom XDPs and data files in FormsIVS and OutputIVS
- Document Services: Steps to enable verbose ORB trace
- Document Services: Steps to tweak bmc pool size for XMLFormService part1
- Document Services: Steps to tweak bmc pool size for XMLFormService part2
- Document Services: Steps to tweak parameters on JMX console
- Enable merging of large xml data files with template
- PDFG: How to change the transaction timeouts in PDFG
- PDFG: How to update CORBA timeout in PDFG
- PDFG: How to update the timeouts in PDFG
- PDFG: Steps to add PDFG user in windows server 2016
- PDFG: Steps to check and install 32 bit libraries and their dependencies
- PDFG: Steps to check folder permission on windows server 2016
- PDFG: Steps to enable strace on unix
- PDFG: Steps to install required 32bit Microsoft Visual C++ redistributables
- PDFG: Steps to run and interpret output of System Readiness Tool
- PDFG: Steps to troubleshoot acrobat specific issues
- PDFG: Steps to troubleshoot HtmltoPDF issues on windows
- PDFG: Steps to troubleshoot HtmltoPDF specific issues on unix(PhantomJS)
- PDFG: Steps to troubleshoot HtmltoPDF specific issues on unix(WebKit conversion)
- PDFG: Steps to troubleshoot multi user PDFG Conversion on unix
- PDFG: Steps to troubleshoot multi user PDFG Conversion on windows
- PDFG: Steps to troubleshoot OpenOffice specific issues on unix
- PDFG: Steps to troubleshoot OpenOffice specific issues on windows
- Document Security: How to apply policy created using document security module in Acrobat
- User Management: How to add users or groups in AEM Forms JEE
- User Management: How to increase UM Session timeout
- Workbench: Connecting workbench using https
- Workbench: Gathering Workbench logs from help menu
- Workbench: How to enable debug output for Workbench
- Workbench: How to tweak workbench memory parameters
- Workbench: How to tweak workbench performance parameters
- Designer: Dependency of Designer on C++ redistributable
- Designer: How to enable HTML Preview
- Designer: How to enable PDF Preview
- Designer: How to install Designer Patches
- JEE Foundation: How to change the value of entropy
- JEE Foundation: How to change transaction timeout of any service in AEM Forms JEE
- JEE Foundation: How to purge process records from the Job Manager table
- JEE Foundation: How to run process purge from command line
- JEE Foundation: Steps to bootstrap manually
- JEE Foundation: Steps to capture debug logs for mobile forms
- JEE Foundation: Steps to mitigate ForcedDisconnectException
- General: How to add management user for JBoss admin console
- General: How to capture HAR logs
- General: How to capture heap dumps of a JVM on a unix server
- General: How to capture heap dumps of a JVM on a windows server
- General: How to capture network logs
- General: How to capture Thread dumps of a JVM on a unix server
- General: How to capture Thread dumps of a JVM on a windows server
- General: How to generate a self signed certificate
- General: How to make web service call from HTML5 form
- General: Steps to enable debug logging for any classes in AEM Forms OSGI
- General: Steps to enable debug logging for any classes in JBOSS Application Server
- General: Steps to enable debug logging for any classes in Websphere Application Server
- General: Steps to enable SSL for AEM Forms OSGi
- General: Steps to encrypt keystore password to be used in lc_turnkey.xml
- General: Steps-to-reset-default-password-for-users-in-AEM-Forms-JEE
- General: Steps-to-reset-default-password-for-users-in-AEM-Forms-OSGI
- General: Steps to set up gemfire locators in a cluster and perform related configuration
Add icons to indicate active and completed tabs
When you have adaptive form with left tab navigation, you may want to display icons to indicate the status of the tab. For example, you want to show an icon to indicate active tab and icon to indicate completed tab as shown in the screenshot below.
Create an Adaptive Form
A simple Adaptive Form based on the Basic template and Canvas 3.0 theme was used to create the sample form.
The icons used in this article can be downloaded from here.
Style the Default State
Open the form in edit mode
Make sure you are in the style layer and select any tab(For example General tab).
You are in the default state when you open the style editor for the tab as shown in the screen shot below
Set the CSS properties for the default state as shown below
| Category | Property Name | Property Value |
|---|---|---|
| Dimensions and Position | Width | 50px |
| Text | Font Weight | Bold |
| Text | Color | #FFF |
| Text | Line Height | 3 |
| Text | Text Align | Left |
| Background | Color | #056dae |
Save your changes
Style the Active State
Make sure you are in the Active state and style the following CSS properties
| Category | Property Name | Property Value |
|---|---|---|
| Dimensions and Position | Width | 50px |
| Text | Font Weight | Bold |
| Text | Color | #FFF |
| Text | Line Height | 3 |
| Text | Text Align | Left |
| Background | Color | #056dae |
Style the background image as shown in the screen shot below
Save your changes.
Style the Visited State
Make sure you are in the visited state and style the following properties
| Category | Property Name | Property Value |
|---|---|---|
| Dimensions and Position | Width | 50px |
| Text | Font Weight | Bold |
| Text | Color | #FFF |
| Text | Line Height | 3 |
| Text | Text Align | Left |
| Background | Color | #056dae |
Style the background image as shown in the screen shot below
Save your changes
Preview the form and test the icons are working as expected.
Business.Adobe.com resources
Resources
Adobe Account
Change language
Copyright © 2023 Adobe. All Rights Reserved.
