ComPDFKit for Web comes with a standard set of UI components that can be directly integrated into your project. However, if you have specific requirements for customizing the UI, the ComPDFKit team provides a flexible solution that allows you to customize the UI components to suit your needs. In this article, we will explore how to use the UI customization feature in ComPDFKit for Web.
ComPDFKit WebViewer UI
ComPDFKit Web provides a robust suite of user interface (UI) components for your web-based PDF viewer and editor. This out-of-the-box UI delivers complete functionality for PDF operations, ensuring that you have all the necessary tools to interact with PDF documents effectively. The default UI is designed with best practices in mind, allowing for immediate integration into your project without the need to make any adjustments, should the default design align with your brand image or project requirements.
For many applications, the default UI of ComPDFKit WebViewer will suffice. Here are some scenarios where using the default UI might be the appropriate choice for your project:
- Rapid Prototyping: If you're in the early stages of development and need to quickly implement a PDF viewer or editor, the default UI allows you to save time and focus on other critical features of your project.
- Generic Applications: If your project is a generic tool, not focused on a personalized user experience or branding, the default UI will provide a professional look and feel without additional effort.
- Internal Tools: Solutions meant for internal company use, such as intranet sites or internal document management systems, might not require personalized UI, making the default offering suitable and cost-effective.
- Budget Constraints: Small businesses or startups may have tight budgets that don't allow for the additional expense of UI customization. In such cases, the default UI helps to keep costs low while still delivering full functionality.
- Time Constraints: Projects with tight deadlines may benefit from using the default UI, as it can be implemented quickly without the need for additional design and development time.
ComPDFKit WebViewer UI is fully equipped to meet the needs of a wide array of projects right out of the box. However, if your project requires tailoring to match specific branding guidelines or to provide a unique user experience, the customization APIs are available to help you modify and refine the UI to meet your specific needs. Evaluate your project's objectives and resources to determine whether the default UI is right for you, or if you need to pursue customization.
UI Customization API
ComPDFKit for Web offers a comprehensive UI customization API that allows you to customize the overall appearance of the UI. With this API, you can dynamically show, hide, or move UI components based on your project requirements. Let's take a closer look at how you can use the UI customization API.
Customize The Navigation Tools
The toolbar in ComPDFKit for Web consists of various components such as panel, full screen, pan, zoom, theme, search, view settings, and more. You have the flexibility to disable, enable, or rearrange these components according to your needs.
1. Let's take the theme component as an example and see how you can disable it using the following code:
ComPDFKitViewer.init(...)
.then(instance => {
const { UI } = instance;
// Hide the theme.
UI.disableElements('themeMode');
})
2. Move the tools Document Comparison in the feature area to the second position in the ribbon:
ComPDFKitViewer.init(...) .then(instance => { const { UI } = instance;
UI.setHeaderItems(header => {
const itemToMove = header.headers.tools.splice(5, 1)[0];
header.headers.tools.splice(1, 0, itemToMove);
});
})
By following similar steps, you can customize other components of the toolbar to create a tailored UI experience for your users.
Customize the Tools in Feature Area
ComPDFKit for Web also provides a feature toolbar that includes components for viewer, annotations, forms, signatures, security, compare documents, content editor, and more. Similar to the toolbar customization, you can disable, enable, or rearrange these components to match your specific requirements. Let's say you want to move the content comparison feature component. Here's how you can achieve that:
- You can show or hide any feature mode in the feature area. Here we will show you how to hide/show the annotation button programmatically:
// Hide the annotation button in the feature area.
UI.disableElements('toolMenu-Annotation');
// Show the annotation button in the feature area.
UI.enableElements('toolMenu-Annotation');
- Multiple buttons or tools can be hidden or shown. Follow the code below to hide or show the panel button:
// Hide the left panel button and the right panel button.
UI.disableElements(['leftPanelButton', 'rightPanelButton']);
// Show the left panel button and the right panel button.
UI.enableElements(['leftPanelButton', 'rightPanelButton']);
By utilizing the UI customization API, you can create a seamless and intuitive UI experience for your users by tailoring the feature toolbar according to your project needs.
Sub Menus of ComPDFKit Features
The ComPDFKit WebViewer UI comes equipped with a collection of powerful tools organized into sub-menus that provide users with a streamlined experience. These sub-menus are pivotal in providing quick access to tools related to the various features such as viewer options, annotation types, form controls, signature fields, document comparison modes, content editing options, and security settings.
- Viewer Sub-Menu
The viewer sub-menu includes a range of viewing tools that allow users to navigate and adjust the layout of the document according to their preferences. It's where you’ll find options such as single page view, continuous scroll, facing pages, and zoom controls. Customize your toolbar to include the viewing options you use most for quick access.
- Annotations Sub-Menu
The annotations sub-menu is a comprehensive collection of annotation tools that enable users to highlight, underline, strikeout text, add notes, draw shapes, and much more. This sub-menu allows users to pick their favorite or most-needed annotation tools and rearrange them as they please, ensuring that the most frequently used ones are always within reach.
- Forms Sub-Menu
Within the forms sub-menu, users can access various form fields such as text inputs, checkboxes, radio buttons, and drop-down lists that can be added to a PDF. The level of customization in this menu facilitates the creation and editing of interactive forms within a document.
- Document Comparison Sub Menu
Document comparison is a valuable feature in ComPDFKit WebViewer. The sub-menu related to this feature enables users to select different types of comparisons—side-by-side, overlay, and more—providing a versatile approach to identifying differences between two documents.
- Security Sub Menu
Last but not least, the security sub-menu allows users to manage document restrictions and encryption settings, such as setting a password to open a document or restricting certain actions like printing or copying text. By customizing this menu, users ensure that only necessary security features appear, simplifying the process of protecting their documents.
Each of these sub-menus can be fully customized to hide or rearrange features provided by ComPDFKit. This bespoke approach ensures a more personalized and efficient workspace, tailored to the unique needs and preferences of the individual user or organizational requirements.
Conclusion
In this article, we have explored how to customize the UI in ComPDFKit for Web 2.1.0. By utilizing the UI customization API, you can show, hide, or move various UI components to create a personalized experience for your users. If you have further questions or need assistance with customizing the UI, please don't hesitate to reach out to the ComPDFKit team. We are here to help you make the most out of your UI customization journey.