Build and deploy a standalone web page (formerly known as Connected Pages)

Developing web extensions (connected pages) for your organization.

Develop a web extension

Standalone web extensions, and those within a package, use the same development components. This getting started procedure describes how to develop a standalone web extension, however the same procedure can be applied to a web extension within a package.

The basic components you need to create a web extension are included in the template shipped with the Skedulo Packages SDK. However, if you are not familiar with creating custom content in Skedulo, we recommend that you contact your customer service representitive for assistance. Note that extensions use, and so require a working knowledge of, React.

Prerequisite

The Skedulo SDK is installed and launched, and developer mode has been enabled in the Skedulo web application.

  1. In the SDK, click Manage Standalone Web Extensions to work on an extension.

  2. Click Create new project to get started. You will be asked to fill some additional metadata related to the page that you intend to build.

    Create Web Extension

    • Title: The title of the page – this shows up as the title of the page once it has been deployed.

    • Description: A description summarizing the functionality of this page (useful during page management).

    • Page URL: The URL slug where this page should be available. This is specific to your tenant.

    • Menu I.D: A short, two character identifier for this page that will be rendered on the Skedulo web app nav bar.

    • Show In Nav Bar?: Should this page be accessible via a nav bar link?

      If you are intending to build a contextual page relying on context passed in via URL, this could be set to False.

  3. Select the base template for your web extension. The SDK ships with a React/Typescript template that will help you get up and running quickly with the stack.

    The template ships with type definitions that will help you use the services that we provide on the web extension.

  4. Click in the Directory field to select a directory and create a folder in which to store your project files.

  5. After you have selected a template and the directory where you would like to create and save the project files, click Create page.

  6. Click Start Development in the upper-right to turn on the development tooling. You should see a URL to the hosted development page (at the top of the SDK window), as well as some output on the terminal.

    Web Extensions Development

  7. To view the page currently under development, click the URL specified at the top of the SDK window. This should be https://<teamname.skedulo.com/c-dev

    By default, the template shows the default (or draft) view of the page.

    In the following example, the draft page features a simple GraphQL query used to fetch a list of jobs that is rendered on the screen:

    Web Extensions

  8. Open the project folder to edit the following template files in an editor of your choice:

    • $PROJECT_FOLDER/src/App.tsx
    • $PROJECT_FOLDER/src/Services/DataServices.ts
    • $PROJECT_FOLDER/tslint.json

  9. Update these files to change the data displayed.

    a. In the tslint.json file, add the following line to the JSX-Rules section:

    "max-line-length": [true, 240],

    This increases the allowable line length in the App.tsx file from the default(120) to 240.

    b. Update the DataServices.ts file to include JobStatus, Duration, and Start fields to the information retrieved by the GraphQL query:

    export interface Job {
  UID: string
  Name: string
  Description: string
  JobStatus: string
  Duration: string
  Start: string
}

const JobsQuery = `
{
  jobs {
    edges {
      node {
        UID
        Name
        Description
        JobStatus
        Duration
        Start
      }
    }
  }
}
`

    c. Then edit the App.tsx file to display the new fields on the web extension:

    renderTableOfData = (data: AppState['data']) => {

    return (
      <table>
        <tbody>
          { data.map(d => (<tr key={ d.UID }><td>{ d.Name }</td><td>{ d.Description }</td><td>{ d.JobStatus }</td><td>{ d.Duration }</td><td>{ d.Start }</td></tr>)) }
        </tbody>
      </table>
    )
  }

    When you save the changes in the App.tsx file the SDK terminal automatically applies the changes and rebuilds the page.

  10. In the Skedulo web app page editor, click the Reload button in the upper-right of the page preview to quickly reload the contents of the page.

    Updated draft page

  11. Click Cancel in the SDK to stop the the web extension developer environment in the SDK.

You can deploy your web extension to the to the Skedulo web application where you can then view, publish, or delete it.

Publish a standalone web extension

Prerequisite

You have finished developing your web extension and stopped the development environment.

  1. With the web extension project open in the SDK, click Deploy.

    This compiles the files, bundles them together, creates a tarball, and pushes it to the Skedulo server where it is processed and exposed as a web page within the web application.

    Web extension deploy build

  2. Open Settings -> Web Extensions in the Skedulo web application. The web extension project you have created should be listed as a Draft in the list of available pages.

  3. Click the checkbox next to the page to select it, or click the hamburger menu on the right of the page listing to display the drop-down menu.

    a. To view the page without publishing it to the Skedulo application, click View.

    b. When you are happy with the page, click Publish.

    This automatically adds the page under More in the navigation menu.

You can remove the web extension in the Web extensions page by clicking Unpublish.

Click Delete to delete the page and remove it from the Skedulo deployment.