How To: Use the SmartForms Tree Control to Navigate Google Drive Folders

In this article, you use the SmartForms Tree Control and configure it to use your Google Drive Folder SmartObject to display your Google Drive folders and files. The Folder SmartObject and others are created for each cloud storage feature you activate. These features allow you to integrate K2 with Dropbox, Box, Google Drive, and OneDrive using SmartObjects, and then use these SmartObjects in your K2 solutions. For more information about the cloud storage service type and creating service instances, see Cloud Storage.

Scenario

You want to use the Tree control to navigate your Google Drive folders and also see files stored in those folders. You add the tree control to a number of views used in your organization and configure it so that people using the forms can find the correct file.

Below is an example showing a Google Drive folder structure with files in the tree control in a SmartForm:

Below is an example of the folders and files as they appear in Google Drive:

Steps

In this scenario, you use the Google Drive Folder SmartObject to populate a Tree control in a SmartForm.

Setup Steps

The following steps set up the scenario. If you want to skip the setup steps and view the topic step, go to Create a new view using a Tree Control.

  1. Activate the Google Drive feature
    1. See Google Drive Feature Activation for configuration steps

Create a view using the Tree control

Create and configure a view with the Tree control using the Google Drive Folder SmartObject. In this scenario, you navigate folders and files in the Denallix folder in Google Drive.

  1. Create a new view using a Tree control.
    1. In K2 Designer, select the create View option. If you are not familiar with creating views, see How To: Create an Item View and a List View.

    2. Name the view GoogleDrive_Tree_View. Specify a Description.
    3. Select a Category for the view. In this example, the Denallix category is used.
    4. Select Item View.
    5. Click Create to start creating the view.
  2. Configure your view to use the Tree control.
    1. Select Create Layout Table Only.
    2. Change the Columns and Rows values to 1 and click OK.
    3. Drag and drop the Tree control from the Input toolbox onto the view canvas.
    4. Set the Look Ahead Level property to (None). See Considerations for more information about this setting.
    5. Click the ellipses (...) of the Data Source Type
    6. Add a new data source and configure it to use your Google Drive Folder SmartObject. In this example, the Google Drive category name is Denallix. You set this name during feature activation.
    7. Click OK.
    8. Click the ellipses (...)of the List Contents Method.
    9. Configure the Path property with a forward slash /. This configures the path to the root (first level) Google Drive folder.
    10. Click Next.
    11. Click Next again (you don't need additional filters).
    12. Click Add, then select Directory in the Sort Column and configure the Sort Order to Descending.
    13. Click Add again, then select Name in the Sort Column and configure the Sort Order to Ascending. This configures the control to list folders first and then files.
    14. Click Finish
    15. Click the ellipses (...) of the Display field
    16. Remove the existing display value, then drag and drop the Name property from the Context Browser . Click OK.
    17. Set the ID and Value properties to Path.
    18. Click the Add button again to further configure the data source.
    19. Using the steps above as a guide, configure the General properties as shown in the image below. Remember to turn on the Recursive option.
    20. Select the ellipses (...) of the List Contents Method. Leave the Path property as is and click Next.
    21. Click Next, then Next again.
    22. Configure the Sort Column mappings as shown here.
    23. Click Finish.
    24. Next, configure the Parent properties as shown in the image below. Then click OK to end the Configure Data Source configuration.
    25. Change the Height property of the tree control to 700px.
    26. Click Finish to save your view.

  3. Create a new form using your GoogleDrive_Tree_View. In the form create a rule to suppress the error message from the Folder SmartObject's Get Contents method returned when viewing a file.
    1. On the GoogleDrive_Tree_View page, select Design a new Form. If you are not familiar with creating forms, see How To: Create a Form.
    2. Specify GoogleDrive_Tree_Form as the Name and specify a Description.
    3. Click Create.
    4. On the Rules tab, click Add to create a new rule.
    5. In the rule designer, select When the Form raises an event from the Form Events options.
    6. Click select method and select the in Error option.
    7. From the Conditions rule options click an advanced condition is true from the Custom Conditions section.
    8. Click Add to start the condition configuration.
    9. Drag and drop the Error Message field from System Values > Error folder in Context Browser into the Left text box.
    10. Change the conditions operator to Contains, then specify No folder found with the specified ID or path in the Right text box. This suppresses an error that sometimes occurs but can be safely ignored.
    11. From the Actions tab click Continue to next execution to complete this conditional statement.
    12. Start a new conditional phrase by clicking on Else in the Logical Conditions section.
    13. Click Show a message from the Actions tab Notifications section.
    14. Select Error as the Message Type.
    15. Specify Error on the tree form as the Title, then drag and drop Error Message from System Values > Error folder in Context Browser into the Body of the message. This shows any other errors that might occur.
    16. Click OK.
    17. Your rule looks similar to the following image:
    18. Click Finish to save your form.
  4. Test your form.
    1. On the GoogleDrive_Tree_Form page in K2 Designer, click Run.
    2. Wait for the form to load and the control to gather your Google Drive folders and files, then click a folder to open the tree.

Review

You used a tree control to populate a navigation tree with your Google Drive folders and files.

Using the selected item's path

This example showed how to configure the Tree control to display the contents of your Google Drive folders and files. To retrieve the selected value of the tree control in rules, you can use the Value property of the Tree control. (Do not use the Path property as it provides the full path and type used, and also includes the SmartObject name.) You can then use a Transfer Data rule to send the Value property to another control.

Considerations

  • The navigation tree does not look for child folders and files since you configured the Look Ahead Level property to (None), so all items have plus signs next to them until they are clicked. At that point they are evaluated. However, depending on the number of items in your data source, setting a Look Ahead Level level can reduce performance on the initial load.
  • Showing icons does not work with SmartObjects generated during feature activation. The icons on the tree control only bind to string or numeric values, however the folder indicator for these SmartObjects is Boolean.