Skip to main content

Interface Builder

The Interface Builder puts panels on a canvas: grids that show the rows of a saved view, charts, action panels and more. The result is an interface that users open from Explorer, from the sidebar or from the homepage. It is the last step of the virtual interfaces pipeline.

What you can do in the Interface Builder​

  • Place grids, charts and action panels on a canvas, and resize and move each panel
  • Add a filter to the interface
  • Set how every panel looks, and give one panel its own look
  • Add a validation rule with a message, and test it with Run
  • Choose who can open the interface, and the Interface Group it is listed under
  • List the interface on the Dataviews tab of Explorer, show it as an app, or pin it to a homepage

Who can use the Interface Builder​

The Interface Builder is on the New page, in Custom Fields & Configuration. The section is shown to users who hold Manage Document Custom Fields, and the Interface Builder tile in it is shown to users who hold Manage Interfaces.

A chart panel shows a chart made in the Chart Builder, and a grid shows a saved view made in the Query Builder, so make those first.

The interface list​

Select Interface Builder to open the View Virtual Interfaces list. It starts with a Create New Interface tile, then has one tile for each interface. Select a tile to open that interface in the builder.

The canvas​

The builder is one window: the panels are on the left and the canvas is on the right. Save is at the bottom right.

The Interface Builder with an empty canvas and the Components tab open on the left: Add Custom Field, Add Grid, Add Chart, Add Recon Interface, Add Preview Window, Add Tab Group, Add Note, Add Divider and Add action panel, and Save at the bottom right

The Interface Builder

The left panel has three tabs:

TabDescription
ComponentsThe panels that can be added to the canvas.
FiltersThe filters of the interface.
SettingsValidation Settings and Appearance.

Components​

Select a component to add it to the canvas.

ComponentDescription
Add GridA grid of the rows of a saved view. Select the pencil on the panel to choose the view.
Add ChartA chart made in the Chart Builder. Select the pencil on the panel to choose the chart.
Add action panelA panel of buttons. Each button has a target: a record, an interface or a web address.
Add Tab GroupA panel with tabs. It reads No tabs configured until tabs are added.
Add Custom FieldA custom field panel. Until a custom field is chosen, it reads Please select a custom field and Please select a context.
Add Recon InterfaceA reconciliation panel. Until it is configured, it reads Please configure the recon interface and Please select a context.
Add Preview WindowA section for the preview of a document.

A panel on the canvas​

Double-click the title of a panel to rename it, then click outside the title to keep the new name. Each panel has a title bar with a handle to drag it, buttons, and a handle in its bottom-right corner to resize it.

The canvas with a grid titled DOCS Document list and a bar chart titled DOCS Documents by type, each with its buttons in the title bar

A grid and a chart on the canvas

ButtonDescription
Edit (pencil icon)Chooses what the panel shows: a saved view for a grid, a chart for a chart panel, or the buttons of an action panel.
Edit appearance (palette icon)Gives this panel its own look. See Appearance.
Delete (bin icon)Removes the panel from the interface.

For a grid, the pencil opens Select a datasource. Choose a saved view and select Save: the grid shows its rows. For a chart panel, the pencil opens Select Chart. Choose a chart and select Save: the chart is drawn.

Action panel​

An action panel holds buttons. Select the pencil to open Edit action panel.

The Edit action panel window: Title DOCS Help, Layout Row, and one button labelled Open the Docwize help with the target URL chosen and the address https://docs.docwize.com

The Edit action panel window

FieldDescription
TitleThe title of the panel.
LayoutHow the buttons are arranged. The example above uses Row.
Add buttonAdds a button to the panel.
LabelThe text on the button.
Record, Virtual Interface or URLThe target of the button. For URL, type the web address.

Filters​

A filter adds a control to the Filters tab of the interface. Select + Add/Edit to open Add and edit filters.

The Add and edit filters window with one filter: Filter Type Value, Filter name DOCS Document type, Dataset DOCS Sample Documents View, Column doc_type, and the Settings and Scoping tabs

The Add and edit filters window

Select + Add filters and dividers to add a filter to the list, then set it:

FieldDescription
Filter nameThe name of the filter.
DatasetThe saved view the filter reads.
ColumnThe field of the saved view whose values the filter offers.
ScopingThe second tab of the filter settings.

Select Save to close the window. The filter is shown in the Filters tab of the interface, with a control for the values of its column.

Appearance​

Appearance, in the Settings tab, sets how the panels look. Select Open to open Panel defaults.

The Panel defaults window with Outlined chosen for Surface and 12px for Corner radius, and a preview panel on the right

Panel defaults

Panel defaults has these settings: Surface, Corner radius, Title bar, Panel actions, Title alignment, Spacing and Accent bar. Choose the options you want; the preview shows the result. The example above uses Outlined for Surface and 12px for Corner radius.

Select Save to apply the defaults to every panel on the canvas. A panel can keep its own look: select Edit appearance (palette icon) on the panel. Settings left on Interface default follow the interface's panel defaults.

Validation Settings​

Validation Settings, in the Settings tab, holds the validation rules of the interface. A rule reads a saved view, and has a message that is shown when the rule is not met. Select Open, then Add Rule.

The Validation Settings window: the rule DOCS No policies, the data source DOCS Sample Documents View, the rule filter doc_type in Policy, None chosen under Validate, and the result Summary: Passed 0 / 1 with the failure message The saved view still holds policies.

A validation rule that fails

ItemDescription
NameThe name of the rule.
EnabledWhether the rule is checked.
Virtual ViewThe saved view the rule reads.
Add conditionAdds a condition to the Rule Filter: a field, an operator and a value, taken from the saved view.
Edit Failure MarkdownThe message shown when the rule fails.
ValidateANY passes if some row matches the rule filter. None passes if no row matches it. ALL passes if every row matches it.
RunTests the rule now. The result reads Summary: Passed with the number of rules that passed, and shows the failure message of a rule that did not pass.
SaveKeeps the rules with the interface.

The Save dialog​

Select Save, at the bottom right of the builder, to open Save Changes.

The Save Changes window: Name DOCS Interface, Allowed Users demo@docwize.com, Allowed Groups DOCS Fixture Group A, Interface Group DOCS Interface Group and the Show as app switch

Save Changes

FieldDescription
NameThe name of the interface.
Pin iconPins the interface to a homepage. It is shown beside Name once the interface is saved.
Allowed UsersThe users who can open the interface.
Allowed GroupsThe groups that can open the interface.
Interface GroupThe group the interface is listed under in Explorer. Required.
Show as appLists the interface under Apps in the sidebar and on the homepage.
Select IconThe icon of the app. It is shown once Show as app is on.
SaveSaves the interface.

Save stays greyed out until an Interface Group is chosen. Choose one from the list, or select the plus beside the field and type a name for a new group. The new group is chosen at once.

The Save Changes window before an Interface Group is chosen: the Interface Group field is empty and Save is greyed out

Save is greyed out until an Interface Group is chosen

Who can see an interface​

Whoever saves an interface is always one of its allowed users. A new interface starts with the signed-in user in Allowed Users, and if that user is removed, the list puts them back. On a saved interface, removing the signed-in user and saving still leaves them in the list.

Add users in Allowed Users, and groups in Allowed Groups, to let more people open the interface. A person who is not listed, directly or through a group, does not see the interface. This includes administrators.

The Save Changes window of a saved interface with Allowed Users empty and a group chosen; the pin icon is beside the Name field

Allowed Users with its only user removed, before Save

The interface is listed on the Dataviews tab of Explorer, under its Interface Group, for users who hold the View Interfaces permission.

The Dataviews tab of Explorer with the group DOCS Interface Group open and the interface DOCS Interface open on the right: a list panel, a Help panel with a button and a chart

The interface on the Dataviews tab of Explorer

A click on a data point of a chart in an interface opens a menu with Drill to detail, Filter dashboard by this and Actions. The interactions of the chart, set in the Chart Builder, are listed under Actions. Selecting one opens its target.

The menu after a click on a bar: Drill to detail, Filter dashboard by this and Actions, with the interaction Open the sample interface under Actions

The menu after a click on a chart

Pin to homepage​

Once an interface is saved, a pin icon appears beside Name in Save Changes. Select it to open Pin to homepage, then select Pin to my homepage. The interface is added to the homepage of the signed-in user, and the dialog lists it under My homepage.

The dialog also offers Pin for a group and Pin for a user to users who hold Group and User Admin.

The Pin to homepage window for DOCS Interface: the pin icon picker, Pin to my homepage, Pin for a group, Pin for a user and Current pins listing My homepage

Pin to homepage

A pinned interface is shown on the homepage as a card.

Show as app​

Show as app lists the interface under Apps in the sidebar and as a card on the homepage. Select Icon chooses the icon of the app. Selecting the app in the sidebar opens the interface in the Portal.

The Save Changes window with Show as app switched on and the icon LuChartPie chosen

Show as app

The homepage with the sidebar open: the Apps group lists DOCS Interface, and the homepage shows its card

The interface under Apps in the sidebar

The interface DOCS Interface open in the Portal after selecting it under Apps

The interface opened from Apps

How to build an interface​

How to build an interface and show it as an app

StepDescription
1Select New, open Custom Fields & Configuration and select Interface Builder.
2Select Create New Interface.
3Select Add Grid, then the pencil on the new panel. Choose a saved view and select Save.
4Select Add Chart, then the pencil. Choose a chart and select Save.
5Move and resize the panels. Double-click a title to rename a panel.
6Select Save. Type a Name.
7Under Allowed Groups, choose the groups who can open the interface. The signed-in user is always allowed.
8Choose an Interface Group, or select the plus to make one.
9To publish the interface as an app, switch on Show as app.
10Select Save. The interface is listed on the Dataviews tab of Explorer under its Interface Group, and under Apps if Show as app is on.

How to add an action panel​

StepDescription
1In Components, select Add action panel, then the pencil on the new panel.
2Type a Title.
3Select Add button, then type its Label.
4Select Record, Virtual Interface or URL, then choose the target or type the web address.
5Select Save.

How to add a filter​

StepDescription
1Select Filters, then + Add/Edit.
2Select + Add filters and dividers.
3Type a Filter name, then choose the Dataset and the Column.
4Select Save.

How to set the appearance​

StepDescription
1Select Settings. Under Appearance, select Open.
2Choose the options you want, then select Save.
3To give one panel its own look, select Edit appearance (palette icon) on it instead.

How to add a validation rule​

StepDescription
1Select Settings. Under Validation Settings, select Open, then Add Rule.
2Type a Name and choose the Virtual View the rule reads.
3Under Rule Filter, select Add condition and choose a field, an operator and a value.
4Select Edit Failure Markdown and write the message.
5Under Validate, choose ANY, None or ALL, then select Run to test the rule.
6Select Save.

How to choose who can open an interface​

StepDescription
1Open the interface from the list and select Save.
2Add users to Allowed Users and groups to Allowed Groups. The signed-in user stays in the list.
3Select Save.

How to pin an interface to the homepage​

StepDescription
1Open a saved interface from the list and select Save.
2Select the pin icon beside Name.
3Select Pin to my homepage, then select Ok. The interface is on the signed-in user's homepage as a card.

Troubleshooting​

IssueDetail
Save is greyed outNo Interface Group is chosen.
A user cannot see the interfaceCheck that the user is listed in Allowed Users or in Allowed Groups. The user also needs the View Interfaces permission.
The pin icon is not beside NameThe interface has not been saved yet.