Document Library

Yeeflow team
Yeeflow team
  • Updated

The Document library control allows you to select a single document library within the current application or from a different application. Users with proper permissions can edit, view, and add files straight from the document library control itself.


By default, it will choose the document library name as a title for the document control. If we want to change the title, we can edit the document library control and change the title in the caption area.
Users can able to view, download documents, or view detail information about each document. 

 

Document_Library_Overview.jpg

 

You can choose to to show all contents under this source document library or even a sub folder within the library. You can also set the document library control to show all the contents of the source document library with pagination, or just display limited records (like top 5 items), and users can go the full document library by clicking See all at the bottom.

 

Add Document Library control to the page

Firstly, find the Document Library control in the controls add panel,. Then, drag and drop it into a section or container on your canvas.

Document_Library_Add.jpg

 

Select data source

Select the source document library which this document library control will show up.

Open the Content > Data Source block, and in the Application dropdown list, select the application which is the current application by default. 

Afterward, move on to the Document Library dropdown list. Select the data library under the selected application. If you want to just show the documents under a specific folder, you can select from the sub folder dropdown list. Like only show documents under the sub folder called "Budget proposals" as below:

Document_Library_Sub_folder.jpg

 

Dynamic folder path: For some cases, you might want to display the contents under a folder based on the dynamic context. Here is an example:

Imagine that you have a project management application, which includes a projects data list, and a document library to store the documents of all projects. And, you want to store the project related documents in the sub folders with projects' name as the folders' name.

Document_Library_Dynamic_Path.jpg

 

Then,  on the project detail page, you want to show all the documents related to the current project. You can add a document library control on your projects view page, and set the dynamic folder path as the value of the current project's name:

Document_Library_Dynamic_Path_1.jpg

 

For example, there's one project named: "Locax notebook computer". And from the document library, under the Projects folder, there's one folder with the same name as "Locax notebook computer", and there are 6 sub folders inside. 

Document_Library_Dynamic_Path_2.jpg

 

Then, from the projects data list, when you click to open the project called "Locax notebook computer" to open the detail page, you will see the document library control with all the contents for the current project:

Document_Library_Dynamic_Path_3.jpg

 

Afterward, from the Data Filters option, click the condition button to filter the documents from the selected document library.

Set the Primary Order and Secondary Order to sort your documents properly.

 

Set Content of Document Library control

1. Choose layout of the document library control

Move to the "Content" section. Select the layout properly from the dropdown list.

Document_Library_Layout.jpg

 

There are 3 types of the layouts which you can select from:

  1. Table View: Choose this option if you want to show the Data Table layout and items as a table. Each item will display as a row with pre-defined columns.

    Document_Library_Overview.jpg

     

  2. Card View: Choose this option will show the items one by one with separate area. 

    Document_Library_Card.jpg

     

  3. Dynamic: If the layout is set to Dynamic, the Document Library will be set to Table View on PC and Tablet device, and Card View on Mobile device.  

    Document_Library_Dynamic.jpg

     

  4. Default: The default settings of the Layout is Dynamic.

     

The properties and styles of Table view and Card view can be set separately. So, if the Default/Dynamic layout is selected, you will be able to see all the related settings for both Table view and Card view. Otherwise, you will only see the table view related settings, or the card view related settings.

Document_Library_Layouts_Style.jpg

 

2. Add display fields to document library control

To add fields, go find the Display fields settings after Layout. and  click the "Settings" button to open the Select List Field window. Select the fields and set the display orders, then click "OK" button to add those fields.

 

Document_Library_Display_Fields.jpg

 

You can drag to change the orders of each field, or click the Trash button to remove this field from the Document library control.

 

Next, click each field to expand the settings panel. In the Table View section, you can set the width of each column in PX or %.

 

And from the Card View section, you can set the width of each control with percentage. For example, To show 4 controls in each row, you can set the width as 25% for each. The Title Layout, Vertical Align, and Title Width settings help to set the positioning of the title for each control. 

 

Document_Library_Field_Settings.jpg

 

3. Caption Settings

If you want to show a title text of this document library control, allow users to search documents, or create new folder / upload documents (only if the users has the proper permissions), you can set the Display Caption option ON. There are couple of the following settings will be available then:

Title: By default the title will be the name of the selected document library. Set customized title with the text here.

Display Search Bar: Turn this ON to allow users search documents with the search bar.

Placeholder: Set the customized text as the placeholder of the search bar.

Allow Add Item: Turn this ON to allow users who have the proper permissions to create new folders or upload documents.

Text of new item button: Set the customized text of the new item button.

Document_Library_Caption.jpg

 

Default values: When allow users to upload documents, the default values settings will be available. You can set one or more fields' default values as needed. For example, the source document library has one field called "Customers" as a Lookup field type. So when users' upload a new document, they will be asked to select a customer from the customer's data list. 

Document_Library_Upload.jpg

 

If the projects data list we mentioned above also has the same Lookup field called "Customer". When users upload documents from the document library control inside in projects details page. You might want to automatically get the value of the project's customer field, and set it to the document's customer field. To do so, you can set the default value like below:

Document_Library_Default_values.jpg

 

Then when users open a project's detail page, and click the "upload documents" button to upload a new document, the customers field's value to be set to the current project's customer value automatically.

Document_Library_Default_values_1.jpg

 

 

3. Set the Detail Info page

Link: select the detail page of each document in this document library control. Detail pages are the forms created in the source document library. Select  Default Layout will show the default view page you set in the source document library. If you've created other custom list forms, those forms will show after the default layout (Like, the new form, view form, and edit form are customize list forms in the following example).  Select Custom URL will allow you to create a dynamic URL. Select None if you do not want the users to view the detail info page. 

DataTable_link.jpg

Select how would you like to open the detail page with Open in settings. Pop-up window means the detail page will show as a pop-up window. Full Screen means once you click each row, the page will be redirect to the detail page. And New window will open another windows and show the detail page.

Hide if value is empty: If there are no records in this Document library, this control will not show on the page.

Fallback: Use the Fallback field to set default content to be used in case the control has no content or does not exist. 

 

Pagination Settings

Limit Records: Turn this ON if you just want to display certain items in this document library control. By default, this option is OFF, which means all records of the selected data source will be displayed in this Document Library control. Then you will need to enter the number of items for each page in the following Records per Page, and set the alignment of the pagination by choosing between Right, Center, and Left from the Align section.

Document_Library_Pagination_1.jpg

 

If the Limit Records option is set to ON, then enter the number of items you wish to display in the following Limit section. Turn View more records ON will display a hyperlink at the bottom of this data table. You can change the txt in the text box of Customize text. Set the Alignment that this view more link with the settings of Align.

Document_Library_Pagination_2.jpg

 

Appearance Settings

Navigate to the Appearance block of the Content tab. Here you can enable or disable the Hidden Header option to show or hide the header of this table, or enable or disable the Sorting Table option to allow the users to sort through the content of the specific column. 

Document_Library_Sorting.jpg

 

Styling the Document Library control 

It is now time to define the appearance of the control. Go forward to the Style block, where you are able to make your control look more eye-candy. 

 

General

1. Table View

  • Table Width: Set the width of the data table as fixed with px or percentage of the container with %.
  • Column Width: Set how the column width will be allocated for each column. Fixed means the column width will be exactly the value you set for each column in the column settings panel, while Auto means the column width will be scaled based on the total width of the Table Width set above, and allocated with the ratio of each column width. 
  • Table Alignment: Choose between Right, Center, and Left.
  • Border Type: Select the type of border to use around the table.
  • Radius: Set the border radius to control corner roundness.
  • Shadow: Set options to apply a box shadow on the Data Table.

Document_Library_Style_General_Table.jpg

 

2. Card View

  • Margin: Set the Margin of the card view area in PX or %.
  • Padding: Set the Padding of the content insider in the card view area in PX or %.

 

3. Fallback

Set the Typography and Color of the text for Fallback.

 

Library Header

  • Padding: Change the padding settings of the content inside in each header cell.
  • Border Type: Select the type of border to use around the table header.
  • Align: Align the text of the table header to the left, center, or right.
  • Vertical Align: Vertical align of the table header text to top, middle, or bottom.
  • Typography: Change the default typography options for the text of table header.
  • Normal / Hover: Set different color and background color for the state of header.
  • Color: Select the color of the header’s text for both Normal and Hover states. 
  • Background color: Select the header's background color for both Normal and Hover states. You may use a solid or gradient color.

Document_Library_Style_Header.jpg

 

Library Content

Typography: Change the default typography options for the text of table content.

Normal / Hover: Switch to set different style of table content.

Row Color: Set the text color of each row for both Normal and Hover states.

Row Background Color: Select the background color of each row for both Normal and Hover states. 

Striped Row: Turn is ON to set different colors for even rows for both Normal and Hover states. 

Even Row Color: Set the text color of each even row for both Normal and Hover states. 

Even Row Background Color: Select the background color of each even row for both Normal and Hover states. 

Link Color: Set the color of hyperlink text for each row for both Normal and Hover states. 

Padding: Change the padding settings of the content inside in each content cell.

Border Type: Select the type of border to use around the table header.

Align: Align the text of the table content to the left, center, or right.

Vertical Align: Vertical align of the table content text to top, middle, or bottom.

 

DOcument_Library_Style_Library_Content.jpg

 

Card Content

  • Margin: Set the Margin of the Content card area in PX or %.
  • Padding: Set the Padding of the content insider in the Content card area in PX or %.
  • Background Color: Select the background color of the Content card area. 
  • Border Type: Select the type of border to use around the Content card area. 
  • Radius: Set the border radius to control corner roundness.
  • Shadow: Set options to apply a box shadow on the Content card area. 
  • Content Padding: Set the padding of each summary field control inside in the Content card area.
  • Title: Set the Typography and Color for the Title text of each field.
  • Value: Set the Typography and Color for the Value text of each field.

Document_Library_Style_Card_Content.jpg

 

Folder Path

The folder path is used to display the current folder, and the parent folders. Users can click each folder's name to navigate easily.

Document_Library_Folder_Path.jpg

  • Margin: Set the Margin of the folder path area in PX or %.
  • Padding: Set the Padding of the content insider in the folder path area in PX or %.
  • Typography: Change the default typography options for the text of folder path.
  • Alignment: Align the text of the folder path to the left, center, or right.
  • Text Color: Set the color of folder path text. 
  • Background Color: Select the background color of the folder path area. 
  • Border Type: Select the type of border to use around the folder path area. 
  • Radius: Set the border radius to control corner roundness.
  • Shadow: Set options to apply a box shadow on the folder path area. 

Document_Library_Style_Folder_Path.jpg

 

Operation Menu

Set the styles of the option menu for each folder or document. The Operation Menu is a part of the Name field of the source document library. If you did not include the Name field in this document library control, users will not be able to see this menu.

Document_Library_Operation_Menu.jpg

 

1. Operation button

Set the style of the operation button:

  • Margin: Set the Margin of the operation button in PX or %.
  • Padding: Set the Padding of the content insider in the operation button in PX or %.
  • Typography: Change the default typography options for the text of operation button.
  • Text Color: Set the color of operation button text. 
  • Background Color: Select the background color of the operation button. 

Document_Library_Style_Operation_Menu.jpg

 

2. Dropdown

  • Typography: Change the default typography options for the text of dropdown list.
  • Normal / Focus: Set different styles for normal state and focus state of the dropdown list. Styles below are supported to be set separately for Normal and Focus state.
    • Color: Choose the color of the dropdown list items text.
    • Background Color: Set background color of the dropdown list. By default, the background color is set as transparent.
    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
    • Radius: Set the border radius to control corner roundness.
    • Shadow: Adjust box shadow options

Document_Library_Style_Operation_Dropdown.jpg

 

Style of Caption

  1. Margin: Set the Margin of the Caption in PX or %.
  2. Padding: Set the Padding of the Caption in PX or %.
  3. Background Type: Select the background color. You may use a solid or gradient color.
  4. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
  5. Radius: Set the border radius to control corner roundness.
  6. Shadow: Adjust box shadow options.
  7. Title: Set the styles of the Title on Caption, 
    • Typography: Set the typography options for the title text.
    • Color: Choose the color of the title text.

Document_Library_Style_Caption.jpg

 

Style of Search Bar

  1. Margin: Set the Margin of the Search Bar in PX or %.
  2. Padding: Set the Padding of the Search Bar in PX or %.
  3. Placeholder Color: Choose the color of the placeholder text.
  4. Typography: Change the default typography options for the text of Search Bar.
  5. Normal / Focus: Set different styles for normal state and focus state of the Search Bar styles below are supported to be set separately for Normal and Focus state.
    • Text Color: Choose the color of the Search Bar text.
    • Background Color: Set background color of the Search Bar. 
    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
    • Radius: Set the border radius to control corner roundness.
    • Shadow: Adjust box shadow options

Document_Library_Style_Search_Bar.jpg

 

Style of New Item Button

  1. Margin: Set the Margin of the New Item button in PX or %.
  2. Padding: Set the Padding of the New Item button in PX or %.
  3. Typography: Change the default typography options for the text of New Item button.
  4. Normal / Focus: Set different styles for normal state and focus state of the New Item button styles below are supported to be set separately for Normal and Focus state.
    • Text Color: Choose the color of the New Item button text.
    • Background Color: Set background color of the New Item button. 
    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
    • Radius: Set the border radius to control corner roundness.
    • Shadow: Adjust box shadow options

Document_Library_Style_New_Item_Button.jpg

 

Pagination

Typography: Change the default typography options for the text of pagination.

Normal / Hover / Active: Switch to set different style of pagination.

Color: Set the text color of the pagination for Normal, Hover and Active states.

Space Between: Set the space for each number of the paging.

Spacing: Set the space between the table content and the pagination.

DataTable_pagestyle.jpg

 

Advanced Settings

Set the Advanced options that are applicable to this control.

 

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.