PhixFlow Help

6. Card Views

Owned by Anthony George
Last updated: Dec 08, 2020 by George Backhouse
4 min read

Part 1

Part 2


This tutorial will cover the creation of card views and expand upon some of the other features we've seen so far, such as custom actions. 

To recap the steps in the video:

Create a Card View

  1. In the right portion of the Businesses dashboard create a new Form called BusinessNotes and set:
    1. Auto Size: tick
    2. Direction: Column
    3. Justify: Flex Start
    4. Align: Stretch
    5. All other Position Settings should be blank.
    6. Prevent Dragging: tick
  2. Open the configuration form for the stream BusinessNotes, and bring the new dashboard to the front.

  3. Drag the stream icon from the configuration form onto the BusinessNotes Form, and select "Card View". This automatically creates a Card View.

    The option to choose the type of view created is available because a form already existed. If no form had existed, a grid view would have been created.

  4. Find the Card View in the repository and set:
    1. Name: Notes
    2. Use Custom Default Filter: tick
    3. Next to the Default Filter, click on the + button.
      • Name: ByBusinessUID
      • Filter Details
        • BusinessUID equals Businesses.UID
        • Click abc to let PhixFlow know this is an expression.
      • Note that default filters can be removed by the user.
        To apply a filter that is not accessible to the user, add a Rule using         the Background Filter Rule section.
    4. Create a Default Sort Order.
    5. Auto Size: tick
    6. Clear all the Position Settings
    7. Prevent Dragging: tick
  5. Locate the Card in the repository and set:
    1. Auto Size: untick
    2. Direction: Column
    3. Justify: Flex Start
    4. Align: Stretch
    5. CSS Properties:
      • maxHeight = 300px
      • minHeight = 50px
    6. Clear all Position Settings.

Configure the Card View Layout

  1. Shift+drag an Area onto the Card to embed the area and set: 
    1. Name: NoteHolder
    2. Auto Size: untick
    3. CSS Properties:
      • margin-left = 5px
      • margin-right = 5px
      • margin-bottom = 5px
      • margin-top = 5px
    4. Clear all Position Settings.

In the Top Portion of the Note

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

In the Lower Portion of the Note

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

Setup a Note Editing Dashboard

  1. Create a new Dashboard called BusinessNotesEditor and set:
    1. Always On Top: tick
  2. Create a new Form called AddNoteForm.
  3. Open the configuration form for the stream BusinessNotes and bring the new dashboard to the front.
  4. Drag the attribute Note onto the dashboard and set:
    1. Width: 100%
    2. Top: 0px
    3. 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.
    This field will be used to associate our notes to a specific business.
  7. Drag an Area onto the dashboard and set:
    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. Prevent Dragging: tick

Setup a Custom Insert Action

  1. Add a button, and set:
    1. Name: InsertNote
    2. Action Type: Insert
  2. Open the stream configuration for Business Notes.
  3. Go to the Actions section.
  4. Click + to add a new action.
  5. In the action configuration form, set:
    1. Name: AddNoteCustomAction
    2. Display Name: Add Note
    3. Context Parameters
      • Include Previous Context Parameters: tick
    4. In the Stream Action Rule Items section, set:
      • Add a Stream Action Rule using the + button.
      • Add a Stream Action using the + button and set:
        • Name: AddNoteAction
        • Stream Item Action: Update
        • Filter Type: Selected Items
        • Copy Values By Name: tick
        • 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 with which this note will be associated. We will set this up later.
          • Save your changes to the attributes.
        • Save your changes to the stream.
      • In Action Completion, set:
        • Close Parent Dashboard: tick

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

Setup a Custom Open Dashboard Action

  1. Update the button Label to Insert.
  2. Drag the action from the stream configuration onto the button Add on your 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, set:
    1. Name: OpenAddNote
    2. Display Name:  +
    3. Open the Context Parameters section.
      • Click the + button.
      • Name: BusinessUID
      • Expression: Businesses.UID
        This is constructed using the name of the element holding the information and the attribute name on that element, for example: <<element>>.<<attribute name>>
        To show the element name, right-click and select         Show Element Details.
      • Save the changes
    4. In Action Completion, set:
      • Open Post Dashboard: tick
      • Select BusinessNotes and drag it into the window.
  8. Save your changes.

Building Note Actions

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

Go into App Mode to test the changes and the new dashboard. 


Next video: 7. Screen Flow

Please let us know if we could improve this page feedback@phixflow.com