Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: fixed expresssion

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

Create a Card View

...

Part 1

Widget Connector
width900
urlhttps://www.youtube.com/watch?v=8S6Q7sv-6xg&list=PLbPt6SI1Zhb8CnWh7Gvopto7D6LEwcB9A&index=7
height500

Part 2

Widget Connector
width900
urlhttps://www.youtube.com/watch?v=Ee-eKwHJuOQ&index=8&list=PLbPt6SI1Zhb8CnWh7Gvopto7D6LEwcB9A
height500


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. Remove all All other Position Settings should be blank.
    6. Tick Prevent Dragging: tick
  2. Open the configuration form for the stream BusinessNotes BusinessNotes, and bring the new dashboard back to the front.
  3. Drag the stream icon from

    the configuration form onto the BusinessNotes form, this automatically creates a Card View.Locate

    the configuration form onto the BusinessNotes Form, this automatically creates a Card View.

    Tip

    The card view is created as a form that 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. Set the Name to: Notes
    2. Tick 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 a formulaan expression.
      • Note that default filters can be removed by the user. If you use the Background Filter Rule this will be applied and not be
        To apply a filter that is not accessible to the
        end user. The latter is available via the Background Filter Rule section, where a filter Rule can be addeduser, add a Rule using the Background Filter Rule section.
    4. Create Default Sort Order.
    5. Tick Auto Size: tick
    6. Remove Clear all the Position Settings
    7. Tick Prevent Dragging: tick
  5. Locate the Card in the repository , enter the settingsand set:
    1. Untick Auto Size: untick
    2. Direction: Column
    3. Justify: Flex Start
    4. Align: Stretch
    5. CSS Properties:
      • maxHeight = 300px
      • minHeight = 50px
    6. Remove Clear all Position Settings.

Configure the Card View Layout

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

In the Top Portion of the Note

  1. Drag an Area ono onto the NoteHolder area and set the following:
    1. Name: NoteContent
    2. Untick Auto Size: untick
    3. CSS Properties:
      • border-bottom = 1px solid #9b9b9b
    4. Remove Clear all Position Settings except Order and Tab Index.
  2. Drag a Dynamic Text area onto NoteContent, with the following settingsthe NoteContent area and set:
    1. Name: Note
    2. Untick Auto Size: untick
    3. CSS Properties:
      • padding-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 ono onto the NoteHolder area and set the following:
    1. Name: NoteAudit
    2. Untick Auto Size: untick
    3. Direction: Row
    4. Justify: Space Between
    5. Align: Center
    6. Remove Clear 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 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. Tick Always On Top: tick
  2. Create a new Form called AddNoteForm.
  3. Open the configuration form for the stream BusinessNotes, and 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.
    This field will be used to associate the note our notes to a specific business.
  7. Drag an Area onto to the dashboard with the following settingsand 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. Tick Prevent Dragging: tick

...

Setup a Custom Insert Action

  1. Add a button, and set the following:
    1. Name: InsertNote
    2. Action Type: Insert
  2. Open the stream configuration for Business Notes.
  3. Go to the Actions section.
  4. Press Click + to add a new action.
  5. In the action configuration form, enter the following settingsset:
    1. Name: AddNoteCustomAction AddNoteCustomAction
    2. Display NameAdd Note
    3. Context Parameters
      • Tick Include Previous Context Parameters: tick
    4. In the Stream Action Rule Items section use the following settings, set:
      • Add 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
        • Tick 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 to. We will set this up later.
          • Save Your your changes to the attributes.
        • Save your changes
        In the
        • to the stream.
      • In Action Completion, set: Tick
        • Close Parent Dashboard: tick


Tip

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 Addin button Addon 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 settingsset:
    1. Name: OpenAddNote 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 i.e. on that element, for example: <<element>>.<<attribute name>>
        To
        find show the element name, right click Show Element Details to obtain the name of an element-click and select Show Element Details.
      • Save the changes
    4. In Action Completion, set:
      • Tick Open Post Dashboard: tick
      • Select BusinessNotes and drag it into the window.
  8. Save the your changes.

Building Note Actions

  1. Drag an Area onto the BusinessNotes Form and apply the following settingsset:
  2. Name: NotesFooter
  3. Enter the Style Settings:
    1. Background-Colour: #9b9b9b
    2. Untick Auto Size: untick
    3. Direction: Row
    4. Justify: Flex End
    5. Align: Center
    6. Height: 45px
    7. Remove Clear all the other Position Settings.
  4. Drag a Button onto the new area and apply the following settingsset:
    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. Anchor_GoBack_GoBacktest the changes and the new dashboard. 



Panel

Next video: 7. Screen Flow