Documentation Viewer

The Documentation Viewer component allows users to view documents directly within the application. It provides an interface for displaying various document types, such as PDFs, Word documents, or other supported formats, without the need for external applications. This component is useful for delivering an in-app experience where users can read, navigate, and interact with documentation seamlessly.

Key Features:

• File Format Support:
  The Documentation Viewer supports multiple file formats, including PDF, Word, and text files, allowing users to access a wide range of document types within the application.
• Zoom and Navigation Controls:
  Users can zoom in and out of documents, making it easier to read detailed content. Navigation controls, such as next/previous page buttons, allow for easy movement through multi-page documents.
• Search Within Document:
  A search feature is often included to allow users to search for specific keywords or phrases within the document, enabling quick access to relevant sections.
• Annotations and Highlights:
  Some implementations of the Documentation Viewer may include tools for users to highlight text, add annotations, or leave comments directly on the document, enhancing collaboration and note-taking.
• Full-Screen Mode:
  Users can switch to full-screen mode to view the document in a larger, distraction-free format.
• Download and Print Options:
  The Documentation Viewer may also provide options to download or print the document, giving users the flexibility to save a local copy or print the document for offline use.

Common Use Cases:

• Viewing User Manuals or Guides:
  End-users can read manuals or guides without needing to download them, ensuring up-to-date information is always available.
• Internal Documentation Review:
  Employees can view and interact with internal policies or procedures directly from the application.
• Knowledge Base Articles:
  Users can open and read knowledge base articles or other help resources for troubleshooting or learning purposes.

Creating Documentation Viewer

1. Under Inventory (), click “Component“, which is on the second left panel.

2. Click Create placed on the second horizonal panel from the top, and a dialog box “Create Component” pops up.

3. Select Type as “Documentation Viewer“, Name it in the text box and click “Create“.

4. When you click Create (), Basic option of Config menu for the Documentation Viewer opens.
5. Now you will see the following menu options:
   • Basic
   • Properties
   • Style
   • Animation
   • Data

Note: You can create this component in the layout option of the configurator section as well. After this, you can follow the process given below.

Basic

Basic Properties	Description
Type	The Component Type indicates the type of component you are adding. In this case, it defaults to “Documentation Viewer” and cannot be changed here. This selection is made initially when you create the component.
Reference Name	The Reference Name is a unique identifier assigned to the component for internal use. This name is visible only to vFlow users, and is not displayed to end-users. The Reference Name is intended for your convenience, helping you easily identify and manage the component throughout.
Description	The Description field is intended for use by application designers or administrators (vFlow users) to provide additional context or details about the component. This description is not visible to end-users and is used solely for internal reference to assist with component management.

Properties

Properties	Description
Header	It is displayed on the top of the component. To know more about header, click here or see the Header section under the System Components.
Footer	It is displayed on the bottom of the component. To know more about footer, click here or see the Footer section under the System Components.

Style

The Style option allows you to personalize the appearance of the Documentation Viewer. This includes adjusting various visual aspects to ensure it complements your application’s branding and overall design. Here’s a breakdown of different settings that you can make adjustments to:

Template

There are two templates available for various UI design needs:

• Template 01
• Template 02

For each template, you can customize the following settings:

• Large Screen Width: The Documentation Viewer width is adjustable by entering a percentage value in the text box. For example, if the width is set to 100%, the Documentation Viewer will take the full width of the screen.
• Transparent: When you click to select this checkbox, the Documentation Viewer will have a transparent background, allowing it to blend into the background of the page or layout.

• Background Color: To choose the background color for the template, you can use a color picker or enter a hexadecimal or RGB color code. The default opacity is set to 100%.

• Font:
  • Family: You can select the font family for text in the template. If no specific font is chosen, “None” will use the default font.
  • Size: You can specify the font size in pixels (px).
  • Color: You can set the font color using the color picker or a hexadecimal or RGB color code. The default opacity is 100%.

• Alphabet Case: You can choose the text case (e.g., uppercase, lowercase) or select “None” to keep the original case.

• Text Alignment: You can set the text alignment (e.g., left, center, right) or select “None” for default alignment.
• Dimension:
  • Height: You can define the height of the template in pixels (px) or percentage (%).
  • Maximum Height: You can set the maximum height to prevent the template from exceeding this limit.
  • Width: You can specify the width of the template in pixels (px) or percentage (%).
  • Maximum Width: You can define the maximum width to prevent the template from expanding beyond this size.
• Spacing:
  • Margin: To adjust the space around the template, enter values for top, right, bottom, and left margins in pixels (px). Default is 0px for all sides.
  • Padding: To set the internal space within the template, enter values for top, right, bottom, and left padding in pixels (px). Default is 0px for all sides.
  • Border Radius: To define the curvature of the corners of the template, enter values for top-left, top-right, bottom-right, and bottom-left in pixels (px). Default is 0px for all corners.

• Custom CSS Class Name
  • Users can enter custom CSS class names in the provided input field to apply additional styles.
  • Multiple Classes Names can be provided, If needed. They can be applied by separating them with commas, as indicated by the example (classA, classB).

These settings allow you to tailor each template and, consequently, the Documentation Viewer to your specific design preferences and requirements.

Animation

This option allows you to apply several animations to enhance the Documentation Viewer’s loading appeal. The following are the available animations:

1. Bounce
2. Flash
3. Pulse
4. Rubber Band
5. Handshake

Their Configuration:

1. Click the Type list, and then select an animation to apply an effect when the Documentation Viewer loads.
2. After you select one of the animations (for example, Bounce), you will see the following configuration options:
   • Speed: In this field, you can select one of the following options to adjust the speed of the animation:
     • Faster
     • Fast
     • Slower
     • Slow
   • Delay: Click this list to select a value (for example, 3 seconds). This value specifies a time period. The application will load the animation after this time period (for example, 3 seconds).
   • Repeat: In this list, select a value (for example, 2). This value specifies the total number of times the application will play the animation.
     
3. After you configure the Documentation Viewer’s animation properties, click to apply them to the Documentation Viewer.

Data

If you want to fetch and show some data in the card, select one of the data types that fits best for the business requirements:

Note: To know more about Data, click here or check the post under configurator.