@deskpro/apps-sdk-react

An SDK for building DeskPRO Apps powered by the React library.

Stats

StarsIssuesVersionUpdatedCreatedSize
@deskpro/apps-sdk-react
002.0.0-beta.33 years ago4 years agoMinified + gzip package size for @deskpro/apps-sdk-react in KB

Readme

DeskPRO React SDK

Online documentation is available at https://deskpro.gitbooks.io/deskpro-apps/.

Installing

npm install --save @deskpro/apps-sdk-react

Basic Tutorial

This tutorial will walk you through creating a simple DeskPRO app which displays a list of people participating in a ticket.

Step 1. Clone the boilerplate

git clone https://github.com/deskpro/apps-boilerplate participants
cd participants
npm install

Step 2. Update the manifest

Update the "deskpro" property in the package.json, which you can find in your project root. Change the "title" property to "Participants".

{
  "deskpro": {
    "version": "2.1.0",
    "title": "Participants",
    "isSingle": true,
    "scope": "agent",
    "targets": [
      {
        "target": "ticket-sidebar",
        "url": "html/index.html"
      }
    ]
  }
}

Step 3. Modify the app component

Your app component can be found in the file src/main/javascript/App.jsx.

import React from 'react';
import { Container, Avatar } from 'deskpro-components';

export default class App extends React.Component {
  render() {
    const { tabData } = this.props;
    
    return (
      <Container>
        <ul className="participants-list">
          {tabData.participants.map((p) => (
            <li key={p.person.id}>
              <Avatar src={p.person.default_picture_url} />
              <div>
                {p.person.name}
              </div>
              <div>
                {p.person.primary_email.email}
              </div>
            </li>
          ))}
        </ul>
      </Container>
    );
  }
}

Step 4. Modify the app styles

The boilerplate includes a SASS stylesheet which can be found in src/main/sass/index.scss. Modify the stylesheet to look like the following.

$dp-styles-font-path: "~deskpro-components/src/styles/fonts/";
@import "~deskpro-components/src/styles/main.scss";

.participants-list {
  list-style-type: none;
  
  li {
    margin-bottom: 1rem;
  }
}

Step 5. Run the dev server

Start the built in dev server.

npm run dev

Now open your browser to https://localhost/agent/?appstore.environment=development.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.