8. Cart Workflow

8.1. Introduction

The cart workflow is a mechanism for users to generate a manifest for working with case files.

 

8.2. Prerequisites

  1. Fork the GitHub repo https://github.com/CBIIT/bento-frontend (representing your GitHub username as YOUR-USERNAME)

  2. Create a local clone of your fork into a local directory, represented here as $(src).

 

8.3. Configuring the Cases page in the Cart Workflow

Cart Workflow - Cases Page

8.3.1. Cases Page: Table Title

To configure the table title on the page (right above the table)

8.3.1.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under myCasesPageData,

    1. set the field myCasesMainTitle to have the desired title for the page

    2. set the field myCasesSubTitle to have the desired subtitle

  3. For example, to have the page appear as ‘My Subjects: Subjects’ instead of ‘My Cases: Cases’ (with ‘My Cases’ being the title):

export const myCasesPageData = {
  myCasesMainTitle: 'My Subjects :',
  myCasesSubTitle: 'Subjects',

8.3.2. Cases Page: Table Content

To configure the table on the “My Cases” page

8.3.2.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under GET_MY_CASES_DATA_QUERY, set graphql query …

8.3.3. Cases Page: Table Icon

To configure the Table Icon for the “My Cases” page

8.3.4. Cases Page: Add Icon

  1. add icon file to appropriate file location: $(src)/bento-frontend/src/assets/icons/

  2. add and commit file to repo; then push the commit to github

8.3.4.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under myCasesPageData,

    1. set the field headerIconSrc to point to the new desired image file

    2. Update the field headerIconAlt to an appropriate “alternate text” description for the icon

  3. For example:

export const myCasesPageData = {
  ...
  headerIconSrc: 'https://raw.githubusercontent.com/YOUR-USERNAME/bento-frontend/master/src/assets/icons/NewIcon.svg',
  headerIconAlt: 'NewIcon logo',

8.3.5. Cases Page: “Go To Files” Button

To configure the Configure “Go To Files” Button* for the “Shopping Cart/My Cases” workflow

8.3.5.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under myCasesPageData, set the field buttonText to have the desired text value

  3. For example, to have the link appear as ‘Go To Files Page’ instead of ‘GO TO FILES’:

export const myCasesPageData = {
  ...
  buttonText: 'Go To Files Page',

8.3.6. Cases Page: Workflow Icon

To configure the Workflow Icon for the “Shopping Cart/My Cases” workflow

8.3.6.1. Add Icon file to repo

  1. add icon file to appropriate file location: $(src)/bento-frontend/src/assets/icons/

  2. add and commit file to repo; then push the commit to github

8.3.6.2. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under myCasesPageData, set the field cartLabel to have the desired text value

    1. Set the field   wizardIconSrc to point to the new desired image file

    2. Update the field wizardIconAlt to an appropriate “alternate text” description for the icon;

  3. For example, to have the icon to use the file MyWizardIcon.svg instead of file MyCases-Wizard-Step2.svg

export const myCasesPageData = {
  ...  
  wizardIconSrc: 'https://raw.githubusercontent.com/YOUR-USERNAME/bento-frontend/master/src/assets/icons/MyWizardIcon.svg',
  wizardIconAlt: 'Go To Step 2',
};

 

8.4. Configuring Files Page in Cart Workflow

Cart Workflow - Files Page

8.4.1. Files Page: Table Title

To configure the table title on the page (right above the table)

8.4.1.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under myFilesPageData,

    1. set the field myFilesMainTitle to have the desired title for the page

    2. set the field myFilesSubTitle to have the desired subtitle

  3. For example, to have the page appear as ‘My Subjects: Files’ instead of ‘My Files: Files’:

export const myFilesPageData = {
  myFilesMainTitle: 'My Subjects :',
  myFilesSubTitle: 'Files',

8.4.2. Files Page: Table Icon

To configure the Table Icon for the “My Files” page

8.4.2.1. Add Icon file to repo

  1. add icon file to appropriate file location: $(src)/bento-frontend/src/assets/icons/

  2. add and commit file to repo; then push the commit to github

8.4.2.2. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under myFilesPageData,

    1. set the field headerIconSrc to point to the new desired image file

    2. Update the field headerIconAlt to an appropriate “alternate text” description for the icon

  3. For example:

export const myFilesPageData = {
  ...
  headerIconSrc: 'https://raw.githubusercontent.com/YOUR_USERNAME/bento-frontend/master/src/assets/icons/NewIcon.svg',
  headerIconAlt: 'NewIcon logo',

8.4.3. Files Page: Workflow Icon

To configure the Workflow Icon for the Files Page in the “Shopping Cart/My Cases” workflow

8.4.3.1. Add an Icon

  1. add icon file to appropriate file location: $(src)/bento-frontend/src/assets/icons/

  2. add and commit file to repo; then push the commit to github

8.4.3.2. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under myFilesPageData, set the field cartLabel to have the desired text value

    1. Set the field   wizardIconSrc to point to the new desired image file

    2. Update the field wizardIconAlt to an appropriate “alternate text” description for the icon; it is recommended to use underscores instead of spaces with this field

  3. For example, to have the icon to use the file MyWizardIcon.svg instead of file MyCases-Wizard-Step2.svg

export const myFilesPageData = {
  ...  
  wizardIconSrc: 'https://raw.githubusercontent.com/YOUR_USERNAME/bento-frontend/master/src/assets/icons/MyWizardIcon.svg',
  wizardIconAlt: 'Go To Step 2',
};

8.4.4. Files Page: File Manifest Name

To configure the File Manifest Name for “Shopping Cart/My Cases” workflow

8.4.4.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under myFilesPageData, set the field manifestFileName: to have the desired file value

  3. For example, to use the name “File Manifest” instead of BENTO File Manifest

export const myFilesPageData = {
  ...  
  manifestFileName: 'File Manifest',
  ...
};

 

8.5. Configuring the Menu Bar for the Cart Workflow

Cart Workflow - Menu Bar

8.5.1. Menu Bar Text

To configure the link that appears on the menu bar:

8.5.1.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under navarBarCartData, set the field cartLabel to have the desired text value

  3. For example, to have the link appear as ‘MY SUBJECTS’ instead of ‘MY CASES’:

export const navBarCartData = {
  cartLabel: 'MY SUBJECTS',

8.6. Configuring Notifications for Cart Workflow

Cart Workflow - Notifications

8.6.1. Notification text/messages when adding cases to Cart

8.6.1.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under cartSelectionMessages, set the field selectionsAddedMessage to have the desired message

  3. For example,

export const cartSelectionMessages = {
  selectionsAddedMessage: 'DONE: successfully added to the  list',
  ...
};

8.6.2. Notification text/messages when removing cases from Cart

8.6.2.1. Edit configuration file

  1. Edit $(src)/bento-frontend/src/bento/cartWorkflowData.js with the editor of your choice

  2. Under cartSelectionMessages, set the field selectionsRemovedMessage to have the desired message

  3. For example,

export const cartSelectionMessages = {
  ...
  selectionsRemovedMessage: 'DONE: successfully removed from the list',
};