Pitcher JavaScript Platform

# Forms Generator Start From Scratch

# Initial Template

Steps for executing initial postcall:

  1. Clone Repo From here (opens new window)
  2. Execute yarn
  3. Replace HERECOMESMYFILEID with the regarding file ID

"ios:watch": "pitcher-watcher-vue --fileID=HERECOMESMYFILEID --platform=ios"

"win:watch": "pitcher-watcher-vue --fileID=HERECOMESMYFILEID --platform=win"

  1. Execute yarn run ios:watch

You should see the postcall like in the image below. Even though nothing is added to the form: Account Card, Call Attendees and Start / End Date components will be shown by default

Postcall First

Let's add our first component:

To add our component we should change /src/postcallFormConfig/postcallItems.js

Currently it doesn't contain any component and looks like:

// /src/postcallFormConfig/postcallItems.js
  {
    id: 'postcallTextArea', // This is the unique id for the component. If there are duplicate ids, last one will be used.
    weight: 400, // Because there are three default components, weight is 400 here
    component: 'PFormTextarea', // Component name from pitcher forms
    props: {
      submissionParam: 'notes', // This is used as a writeback property. Value of this component will be sent like customParams: { notes: 'value entered by user'}
      title: $t('Description'), // Label of the component
    },
  },

# Get Component Data From the local DB

Let's add another component that shows discussion items in select box. To understand to usage of itemValue, itemText, disableLookup, searchable, returnObject Check the documentation (opens new window)

  {
    weight: 500,
    id: 'discussionItems',
    component: 'PFormSelect',
    itemsFetcher: {
      query: 'SELECT * FROM tbl_crm_discussionItem_v1', //Queries from pitcher impact db
    },
    defaultValue: '',
    props: {
      submissionParam: 'discussionItem',
      precallField: 'discussionItem', 
      itemValue: 'Id',
      itemText: 'Name',
      disableLookup: true,
      title: $t('Discussion Items'),
      searchable: false,
      returnObject: false,
    },
  },

Alt Text Alt Text

# Dependent Component

Now let's add a new component that is dependent to the discussion items above. Visibility is controlled by visible property, in our case we used discussionItems which means if discussionItem is selected Call Key Messages will be visible as well. To make it dependent PITCHER__Parent_Discussion_Item__c = is used in the query.

  {
    weight: 600,
    id: 'callKeyMessages',
    component: 'PFormSelect',
    itemsFetcher: {
      query: 'SELECT * FROM tbl_crm_key_messages_v1 WHERE PITCHER__Parent_Discussion_Item__c = {{ discussionItems }}',
    },
    visible: 'discussionItems',
    props: {
      submissionParam: 'callKeyMessage',
      precallField: 'callKeyMessage',
      itemValue: 'Id',
      itemText: 'Name',
      disableLookup: true,
      title: $t('Call Key Messages'),
      searchable: false,
      returnObject: false,
    },
  },

Dependent Video

# Overwrite the component

Lets overwrite the start and end date:

{
    id: 'startEndDateTime',
    weight: 300,
    props: {
      //parse the data to send to getParamsForSubmission
      parser: ({ startDateTime, endDateTime, ...rest }) => ({
        ...rest,
        startDatetime: new Date(startDateTime), //Formats as timestamp
        endDatetime: new Date(endDateTime), //Formats as timestamp
      }),
    },

# Validation

// src/postcallFormConfig/CallType.js
import { requiredWithMessage } from '@/utils/required'

export function callType() {
  const items = [
    $t('Cycle Call'),
    $t('Accompanied Call'),
    $t('Tandem Call'),
    $t('Coaching Call'),
    $t('Service Call'),
    $t('Outlet Call'),
    $t('Call to HCI'),
    $t('Webinar'),
    $t('Remote Group Meeting'),
    $t('Remote Visit'),
  ]

  return {
    id: 'callType',
    weight: 150,
    component: 'PFormSelect',
    props: {
      submissionParam: 'type',
      title: $t('Call Type'),
      items,
      defaultValue: items[0],
      precallField: 'type',
      required: true,
      rules: [requiredWithMessage('Call Type should be filled')],
      itemValue: 'Name',
      itemText: 'Name',
      disableLookup: true,
      searchable: false,
      returnObject: false,
    },
  }
}

Call Type

# Custom Implementations

Here are the custom implementations:

  useKeywordBoundPostcallItem({ //Custom function to prefill product by using keywords of presented content
    id: 'product',
    keywordField: 'Product',
    storeData: products,
    storeStatus: productsStatus,
    title: $t('Product'),
  }),
  await precallNotes(), // Adds precall notes, it is also custom function. To have cleaner code we just import this
  {
    id: 'postCallNotes',
    weight: 700,
    component: 'PFormTextarea',
    props: {
      submissionParam: 'postCallNotes',
      title: $t('Post Call Notes'),
    },
  },
  {
    id: 'PhotoAttachment',
    weight: 750,
    component: PhotoAttachment, //Imported custom component which doesn't belong to the form package
  },
  {
    id: 'followUps',
    component: NextAppointment, //Imported custom component which doesn't belong to the form package
    weight: 850,
  },
  callType(), //Imported component definition

Github link for the postcall that we implemented (opens new window)

← Forms Package →