Portlet Factory, Version 6.1.2

 

Using the File Chooser builder

You can let the user select a file by using the file chooser. Once the file has been selected, the user clicks the Result button. The user is then shown the relative path of the selected file.

  1. Create a model.

    If you did not select Main_and_Page, do the following:

    1. Add a Page builder call to the model, and call it page1.

      This page is the first page of the model. Don't worry about adding content right now.

    2. Add an Action List builder call to the model.
    3. Type "main" for the Name input.
    4. Make page 1 the first action in the Actions list.

      This action loads the page.

  2. In page1, create two span tags.

    One is for the file chooser and the other is for the Results button, as shown in the following example. 

    <html><body><form>
<b>An Example of Using the File Chooser Builder</b>
<p>Select a file in the file chooser. Then, click the Results button. The relative path to the file is displayed.</p>
<hr>
<span name="chooser" />
<br><br>
<span name="resultsbutton" />
</form></body></html>

  3. If chooser is the span name assigned to the File Chooser builder, and results is the span name assigned to the button builder, do the following:

    1. Add another Page builder call to the model. Call this builder call "results".

      This builder is used to display the results page.

    2. In the "results" page, add two span tags: one for displaying the results in a text area and another for the Back button, as shown in the following example. 
      <html><body><form>
<b>An Example of Using the File Chooser Builder (Page 2)</b>
<p>The following is the relative path of the file you selected.</p>
<hr>
<span name="chooser_results" />
<br><br>
<span name="backbutton" />
</form></body></html>

  4. Otherwise, if chooser is the span name assigned to the Text Area builder, which displays the results, and backbutton is the span name assigned to the Button builder, add a Variable builder call to the model, and do the following:

    1. Name the builder "selectedValue".
    2. Assign the builder type String.
    3. In the Initial Value field, enter the following path: factory/samples

      Note: This variable is used to hold the value of the selected path for the file chooser.

    4. Click OK.

  5. Add a File Choose builder call to the model, and add the following information:

    1. For the page location, select page1 from the Page drop-down menu and the first span name listed in the Tag menu. For example, chooser.

      The file chooser appears in the location of the span tag.

    2. In the Starting Directory, leave the default as WEB-INF/models.
    3. From the Filter Class drop-down menu, select com.bowstreet.builders.webapp.methods.FileChooserMethods$FilterDirectories.
    4. In the Selected Value field, enter an indirect reference to the builder call name of the Variable builder you added to the model in Step 5. For example: ${Variables/selectedValue}

      where selectedValue is the builder call name of the Variable builder added in step 3 or 4.

    5. Select the option Visible Root Node.
    6. From the Selection Rule drop-down menu, select All nodes can be selected.
    7. Click OK.

  6. Add a Button builder call to the model.

    This button is the Results button. Do the following:

    1. From the Page drop-down menu, select page1.
    2. From the Tag drop-down menu, select the span tag you created for the Results button. For example, resultsbutton.
    3. In the Label field, enter Results.
    4. In the Action Type field, select the following option: Submit form and invoke action
    5. In the Action field, type the name of the second page.

      When the Results button is clicked, the user sees the page specified in the Action field.

    6. Click OK.

  7. Add another Button builder call to the model.

    This button is the Back button on the second page. Do the following:

    1. From the Page drop-down menu, select the second page. For example, results.
    2. From the Tag drop-down menu, select the span tag you created for the Back button. For example, backbutton.
    3. In the Label field, enter Back.
    4. In the Action Type field, select the following option: Submit form and invoke action
    5. In the Action field, type the name of the first page. For example, page1.

      When the Back button is clicked, the user sees the page specified in the Action field.

    6. Click OK.

  8. Add a Text Area Builder call to the model.

    The results appear in this text area. Do the following:

    1. From the Page drop-down menu, select the second page. For example, results.
    2. From the Tag drop-down menu, select the span tag you created to display the results in a text area. For example, chooser_results.
    3. In the Default Text field, enter an indirect reference to the variable created at run-time. For example:${Inputs/chooser}, where chooser is the span name assigned to the File Chooser builder.

      Note: If you are picking this indirection from the reference chooser, expand the Inputs node and then expand the page1 node to select ${inputs/chooser}.

    4. Click OK.

  9. Run the model.

  10. Make a selection in the file chooser, then click Results.

    The Results page displays the path of the item you selected.

Parent topic: File Chooser builder

Library | Support |