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.

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.

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

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

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

Application

Afterward, move on to thedropdown 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 Document Library sub folder dropdown list. Like only show documents under the sub folder called "Budget proposals" as below:

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.
​
​

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:

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.

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

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

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.

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.

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 , %, em, rem, vw, calc.

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.

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.

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.
​

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:

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.

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.

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.

Start at: Start displaying from which data record.

Limit Records: Turn this ON if you just want to display certain items in this control. By default, this option is OFF, which means all records of the selected data source will be displayed in this News 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.

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 News control. You can change the text in the text box of Customize text. Set the Alignment that this view more link with the settings of Align.

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.

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.

3. Fallback

Set the Typography and Color of the text for Fallback.

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.

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.

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

Margin: Set the Margin of the folder path area in PX , %, em, rem, vw, calc.

Padding: Set the Padding of the content insider in the folder path area in PX , %, em, rem, vw, calc.

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.

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.

Set the style of the operation button:

Margin: Set the Margin of the operation button in PX , %, em, rem, vw, calc.

Padding: Set the Padding of the content insider in the operation button in PX , %, em, rem, vw, calc.

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.

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.

Set the Advanced options that are applicable to this control.

​