We can embed actions within a grid to perform specific activities, such as deleting the record or sending an email. For our example we will enable users to click a button and make a call.
- On the Companies grid click Telephone Button.
- We will set Label to
Call, as it
will be clearer to users. - Click the Action tab.
- Action Method, Actionflow.
- Actionflow, click
Insert excerpt |
---|
| _addIcon |
---|
| _addIcon |
---|
nopanel | true |
---|
|
. - Name, CallCompany.
- Click Confirm.
- The actionflow will open. We will look at actionflows in more detail later in the course. Here we will setup a simple actionflow:
- Click on Connect, in the dialog that opens click Companies. This tell PhixFlow we need data from the companies grid.
- Click Connect Input.
- In the mapping screen that opens, drag Number to the right hand side:
- From the Actionflow toolbar add a Calculate node. We will use this to construct the action details.
- Name it,
callDetails,
and click Create Action. - Now we need to connect the Input Connection to the Calculate node. Click and hold on the input connection point and drag it over the calculate node:
- Click on the pipe between the two items.
- In the mapping screen, drag Number to the right. This will allow us to work with the value in the calculate node.
- Click n the Calculate node, in its properties click add in the Calculate Attributes section.
- Name,
CallNumber
. - Expression,
"callto:" + in.Number
- Save your changes,
Insert excerpt |
---|
| _finish |
---|
| _finish |
---|
nopanel | true |
---|
|
.
- From the Actionflow toolbar add an Open URL node.
- Name it,
Make Call
, and click Create Action.
- Connect the nodes. Hover over CallDelatils and click out, move your mouse over MakeCall and click.
- In the mapping screen that opens, drag CallNumber to URL.
- Click Confirm Mapping.
- To access the mappings at any point click pipe connecting the two nodes.
- Close the Actionflow.
- On the view attribute TelephoneButton, we see the actionflow has been set.
- It is recommended that an icon be set for the action button to indicate its purpose.
- Create an Action Icon Style
- Name,
TelephoneCall
. - Background Image, add the phone-call.svg icon from the zip downloaded earlier.
- Background Repeat,
no-repeat
. - Background Position,
center
. - Background Size,
contain
. This resizes the image to make it fit into the available space and is a useful CSS property. - Finally,
- In the CSS Properties, click
Insert excerpt |
---|
| _addIcon |
---|
| _addIcon |
---|
nopanel | true |
---|
|
. - CSS Tag,
opacity
. - Value, 1
- Save all changes.
Check Point
The screen should look similar to this:
In-Grid Editing
PhixFlow can be configured to allow users to make edits to records directly in a grid.
- Open the View Configuration for the Companies grid.
- Right-click and select Show the View Configuration.
- In the Advanced section, tick Auto Save.
- This will automatically save any changes, however it is possible to specify an action that goes beyond a save such as performing validation.
- In the View Attributes section, double-click Web.
- In the Grid Settings section, untick Read Only.
- Save your changes.
Testing
Switch to app mode and add a website to a company. Note for a save to occur the cell must be click out of.
Adding a Chart
- Simple Setup
- Colour Maps
- Link to setting up more chart types.
Anchor |
---|
| formBuildingFindComponentParent |
---|
| formBuildingFindComponentParent |
---|
|
It can be very useful to find a layout, component or container. There are two ways to do this:
Using Layers
The Layers pane is expandable from the left of the screen canvas. Select an item:
- on the canvas to highlight it in the Layers pane
- in the Layouts pane to highlight it on the canvas.
If the layer section is not visible click Insert excerpt |
---|
| _layer_slider |
---|
| _layer_slider |
---|
nopanel | true |
---|
|
.
Using Find in Repository
Right-click any item on an unlocked screen and select
Insert excerpt |
---|
| _repository_find |
---|
| _repository_find |
---|
nopanel | true |
---|
|
Alternatively, to search the repository, expand the
Components section and navigate to the component. The position of the components on a screen is reflected in their order and nesting in the repository list.
Tip |
---|
To check whether a component is shared with multiple applications, open its properties and check the Parent Details section, which names the application or package to which the component belongs. For example a component that is shared between several applications has a package as its parent; see Package. |
Styles
explanation
Style Hierarchy
- Application Styles
- Shared Style
- Local Styles
- Formatting Rules
- Overriding Styles Best Practice
- Clearing Styles
Creating Screens from the Home page
- Options
- Templates
- Complete
- Blank
- Screen Options
- Floating
- Size
- Open Maximised
- Creating from an ERD
- Creating from a Workflow
- Available Unused Actions.