Card Views

Create a Card View

1. In the right portion of the Businesses dashboard create a new Form called: BusinessNotes
2. Enter the Settings:
   1. Tick Auto Size
   2. Direction: Column
   3. Justify: Flex Start
   4. Align: Stretch
   5. Remove all other Position Settings
   6. Tick Prevent Dragging
3. Open the configuration form for the stream BusinessNotes, and bring the new dashboard back to the front
4. Drag the stream icon from the configuration form onto the BusinessNotes form, this automatically creates a Card View.
5. Locate the Card View in the repository
   1. Set the Name to Notes
   2. Tick Use Custom Default Filter
   3. Next to the Default Filter click +
      • Name: ByBusinessUID
      • Filter Details
        • BusinessUID equals Businesses.UID
        • Click abc to let PhixFlow know this is a formula.
      • Note that default filters can be removed by the user. If you use the Background Filter Rule this will be applied and not be accessible to the end user. The latter is available via the Background Filter Rule section, where a filter Rule can be added.
   4. Create Default Sort Order
   5. Tick Auto Size
   6. Remove all the Position Settings
   7. Tick Prevent Dragging
6. Locate the Card in the repository, enter the settings:
   1. Untick Auto Size
   2. Direction: Column
   3. Justify: Flex Start
   4. Align: Stretch
   5. CSS Properties:
      • maxHeight = 300px
      • minHeight = 50px
   6. Remove all Position Settings

Configure the Card View Layout

1. Drag an Area onto the Card (using shift to embed the area)
2. Set the following for the Area:
   1. Name: NoteHolder
   2. Untick Auto Size
   3. CSS Properties:
      • padding-left = 5px
      • padding-right = 5px
      • padding-bottom = 5px
      • padding-top = 5px
   4. Remove all Position Settings

Top Portion of the Note

1. Drag an Area ono the NoteHolder area and set the following:
   1. Name: NoteContent
   2. Untick Auto Size
   3. CSS Properties:
      • border-bottom = 1px solid #9b9b9b
   4. Remove all Position Settings except Order and Tab Index
2. Drag a Dynamic Text area onto NoteContent, with the following settings:
   1. Name: Note
   2. Untick Auto Size
   3. CSS Properties:
      • padding-bottom = 5px
   4. Width: 100%
   5. Remove all other Position Settings except Order and Tab Index

Lower Portion of the Note

1. Drag an Area ono the NoteHolder area and set the following:
   1. Name: NoteAudit
   2. Untick Auto Size
   3. Direction: Row
   4. Justify: Space Between
   5. Align: Center
   6. Remove all Position Settings except Order and Tab Index
2. Drag a Dynamic Text field onto the area and set the following:
   1. Name: NoteByUser
3. Drag a DateTime field onto the area and set the following:
   1. Name: NoteDate
   2. Type: Datetime
   3. Remove all Position Settings except Height, Order and Tab Index

Setup a Note Editing Dashboard

1. Create a new Dashboard called BusinessNotesEditor
   1. Tick Always On Top
2. Create a new Form called AddNoteForm
3. Open the configuration form for the stream BusinessNotes, and bring the new dashboard back to the front
4. Drag the attribute Note onto the dashboard and set the following:
   1. Tick Multi-Line
   2. Width: 100%
   3. Top: 0px
   4. Bottom: 45px
5. Drag the attributes UID onto the dashboard and hide the field
6. Drag the attribute BusinessUID onto the dashboard and hide the field
   1. This field will be used to associate the note to a specific business
7. Drag an Area onto to the dashboard with the following settings:
   1. Name: AddNoteFooter
   2. Background-Colour: #9b9b9b
   3. Direction: Row
   4. Justify: Flex End
   5. Align: Center
   6. Width: 100%
   7. Height: 45px
   8. Bottom: 0px
   9. Tick Prevent Dragging

Setting Up Custom Actions

1. Add a button, and set the following:
   1. Name: InsertNote
   2. Action Type: Insert
2. Open the stream configuration for Notes
3. Go to the Actions section
4. Press + to add a new action
5. In the action configuration form, enter the following settings:
   1. Name: AddNoteCustomAction
   2. Display Name:  Add Note
   3. Context Parameters
      • Tick Include Previous Context Parameters
   4. In the Stream Action Rule Items section use the following settings:
      • Add Stream Action Rule using the + button
      • Add a Stream Action using the + button
        • Name: AddNoteAction
        • Stream Item Action: Update
        • Filter Type: Selected Items
        • Tick Copy Values By Name
        • Attributes to Update:
          • NoteDate = now()
            • Automatically sets the time to now.
          • NoteByUser = _user.name
            • Sets the note author to the current user.
          • BusinessUID = _context.BusinessUID
            • Sets the UID of the Business this note will be associated to. We will set this up later.
          • Save Your changes
        • Save your changes
      • In the Action Completion: Tick Close Parent Dashboard

Copy Values by Name updates the underlying stream with values types into a form if the names of the fields match. All standard actions will do this. When you add a custom action to update or insert, it is important that you tick this, otherwise the form will not continue to work as it currently does, and you will not be able to easily as new fields as you have done so far.

1. Update the button Label to Insert
2. Drag the action from the stream configuration onto the button Add in your edit form
3. Save the changes.
4. Open the stream configuration for BusinessNotes
5. Go to the Actions section
6. Press + to add a new action
7. In the action configuration form, enter the following settings:
   1. Name: OpenAddNote
   2. Display Name:  +
   3. Context Parameters
      • Click the + button
      • Name: BusinessUID
      • Expression: Businesses.UID
        • This is constructed using the name of the element holding the information and the attribute name
        • i.e. <<element>>.<<attribute name>>
        • To find the element name, right click  Show Element Details to obtain the name of an element.
      • Save the changes
   4. Action Completion
      • Tick Open Post Dashboard
      • Select BusinessNotes
8. Save the changes.

Building Note Actions

1. Drag an Area onto the BusinessNotes Form and apply the following settings:
2. Name NotesFooter
3. Enter the Style Settings:
   1. Background-Colour: #9b9b9b
   2. Untick Auto Size
   3. Direction: Row
   4. Justify: Flex End
   5. Align: Center
   6. Height: 45px
   7. Remove all the other Position Settings
4. Drag a Button onto the new area and apply the following settings:
   1. Name: OpenAddNote
   2. Action Type: General
   3. Action: OpenAddNote
   4. Width: 35px
5. Set the Label value to +

Go into App Mode to see the effect of this change. When deleting a note use the tick box on the note to select the note to be deleted.