Search⌘ K
AI Features
Home
Courses
Running Serverless Applications with AWS Lambda

Adding More Functions to `user-workflow.js`

Explore how to extend your user workflow in AWS Lambda applications by adding JavaScript functions that control step visibility, show upload progress with progress bars, and manage errors. This lesson guides you through enhancing the user experience in serverless workflows using client-side scripting.

We'll cover the following...

index.html #

Next, you can start composing the visual part of the workflow. First, let’s create a simple web page that will let you show different steps of the workflow. The web page also needs to load the client application JavaScript from an external file. A new file is created called index.html in the web-site directory, with content similar to the following:

Node.js
<html>
  <body>
    <div step="initial">
      <h1>Select a file</h1>
      <input type="hidden" id="apiurl" value="${API_URL}" />     
      <input type="file" id="picker"/>
    </div>
    <div step="uploading" style="display: none">
      Please wait, uploading...
      <br/>
      <progress id="progressbar" max="100" value="0" /> 
    </div>
    <div step="converting" style="display: none">
      Please wait, converting your file...
    </div>
    <div step="result" style="display: none">
      <h1>Your thumbnail is ready</h1>
      <a id="resultlink">download it</a>
    </div>
    <div step="error" style="display: none">
      <h1>There was an error creating the thumbnail</h1>
      <p id="errortext"></p>
    </div>
    <script src="user-workflow.js"></script>
  </body>
</html>

Notice the placeholder for the API URL on line 5 of the previous listing. In earlier ...