@deskpro/apps-sdk-react

    2.0.0-beta.3 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @deskpro/apps-sdk-react

    DownloadsWeekly Downloads

    1

    Version

    2.0.0-beta.3

    License

    BSD-3-Clause

    Unpacked Size

    3.92 MB

    Total Files

    81

    Last publish

    Collaborators

    • ash_dawson
    • jducro
    • chroder
    • immranneft