Skip to main content

Build a simple employee directory using the list block

👉 Drag me

Introduction

In this article, we'll show you how you can create an employee directory to store the names and contact information for employees across your organization. We'll show you how you can design the layout of your directory and let users filter and sort by specific departments, roles, or other groupings. Your employees can then quickly access your directory and find the appropriate contact information for coworkers. We'll show you how to create a model, add a page, and how to add content to your page.

Employee_directory_infographic.png

Step 1: Create a Person model

To store your employee information, you need a model in Applaud. You'll need to think about what sort of information you want to store in your model, see our knowledge base article, Models.

a: Create your model with these details:

  • Name - "Person."

  • Description - "Personal information regarding individual employees."

  • Icon - We want to illustrate the purpose of our Person model, so we'll select the one called "human."

Model_schema_updated.png

Use these above settings and follow these steps to add your new model:

Create a new model

Note

Only users with the Tenant admin and Experience designer roles can see or edit a model.

Prerequisites

Before you begin creating a new model, it's helpful if you plan exactly what the overall purpose of it is to help you define the properties, and whether these properties should be linked to additional models. It's also helpful if you design how your content should look before creating your model to aid you in adding the most relevant data.

Procedure

  1. On the Admin home page, select Models.

  2. On the Models page, select CREATE NEW.

    Create_new.png

  3. In the Model dialog box, in the Name box, type in a meaningful name for your model. For example, if you want to create a model for requesting time-off, you could call this "Leave request."

    Model_name.png

  4. In the Description box, type in a meaningful description for your model. For example, "A period of paid time off work for the employee to use however they like."

  5. From the Icon list, select an icon that illustrates the purpose of the model. For example, you could use the Beach icon to represent time off for vacations.

  6. Select ADD.

Follow-up task
b: Add properties to your model

Using the steps below, add these properties with these settings:

Avatar

The first property we're going to add is the Avatar property. An avatar is an image used to represent a person. This could be a photograph or an illustration of your choice. We're going to use photographs.

  • Name - We want this to be obvious so we're going to type in "Avatar."

  • Type - We want to be able to upload a picture file so we'll select the "File" type.

  • Internal name - Applud generates this automatically so we don't need to worry about this. However, you can amend this if you want it to be something else.

  • Required - We want this to be mandatory so we're going to select this option.

Properties.png

You have successfully added your first model property. Let's add a few more.

Full name

We want to capture the name of the employee.

  • Name - We want the employee's full name to appear, so we're entering "Full name."

  • Type - We're selecting the "Free text" type.

  • Required - We want this to be mandatory again, so we'll select this option.

Role

We want to know what role each employee performs.

  • Name - "Role."

  • Type - "Free text."

  • Required - We'll select this option.

Department

Now let's add a property to capture what department the employee works in. We would usually use a foreign key for this, but we are using lookup here for illustration purposes only.

  • Name - "Department"

  • Type - "Lookup"

  • Required - Yes

  • Lookup options - Label - We need to add some labels for this choice and because this property is to capture which department the employee works in we're adding:

    • Marketing

    • Sales

    • Support

    • Development

    • Senior management

    • HR

Lookup.png
Extension number

Next, let's add a property to capture the employee's extension number.

  • Name - "Extension number."

  • Type - "Number."

  • Required - Not every employee will have a phone number so we'll make this optional and leave this option clear.

Email address

Finally, let's add a property to capture the employee's email address.

  • Name - "Email address."

  • Type - "Email."

  • Required - We'll make this optional so we'll leave this option clear.

Congratulations! You have successfully created your first model. The next step is to apply access controls to your model.

Add a property to your model's schema
Prerequisite
Procedure

  1. On the Admin home page, select Models , and from the list, select the model you want to add a property to, and on the Schema page, in the Model properties box, select ADD.

    Add.png

  2. In the Name box, type in a field label, visible to your users. We recommend you use sentence case in the singular form. For example, "Person's name." If this is a foreign key, don't add Id at the end because your users might not understand it.

  3. From the Type list, select a format for your property. Lookups and Foreign keys require you to enter additional information.

    • Free text - Adds a text box so that users can type in almost anything they like, without restrictions to form.

    • Number - Requires the end-user to enter a numerical value.

    • Boolean - Creates a true or false result. For example, a tick box.

    • Date - Requires the user to enter a date or date-time from a pop-up calendar.

    • Date range - Requires the user to enter a start date and an end date and optionally times.

    • File - Requires the user to upload a file, for example, an image or a PDF. If you add a model access control policy, the underlying file property URL is only accessible to users with access to that model property. Files expire after 20 hours.  So, for example, if you try to open an old export download link in an email, you'll see an error after 20 hours.

    • User - Requires the user to enter the name of particular users.

    • Email - Requires the user to enter an email address for an individual or an organization.

    • URL - Requires the user to enter a web address (URL) for external sites.

    • GeoPoint - Requires the user to input location data.

    • Lookup - Requires you to enter multiple options for the user to choose from. For example, a simple status, such as Approved, Rejected, Pending.

    • Foreign key - The reference to another model. For example, if you create a person model, you might use a foreign key to connect to a country model, where a list of countries is pre-configured.

    • Icon - Requires the user to choose an icon to help illustrate the purpose of the data.

    • Color - Requires the user to choose a color to display as part of the data.

    Applaud generates the Internal name automatically from the property name you entered, but you can amend this. You can use the internal name when managing APIs for your data. For a lookup property, each look-up option generates its own internal name or ID after you save the property. Reopen the Property dialog box to see the IDs next to the lookup options. You might need this when working with APIs and exporting data.

  4. If you want to make this field mandatory on a form, so your users have to complete it, select the Required option. If you leave this option clear, the field is optional for the user.

    Note

    This option is not available when adding custom properties to the User model.

  5. If this is a Free text property type and you want to use this as the label in other areas of your Applaud tenant, select the Set as default label for this model option.

  6. If you want to use this property as a second unique key for updating data during integration, you can select Set as secondary unique key. When selected, values for each record must be unique. You can remove this as your secondary unique key and then choose another property. However, if there are already values for the property, you can only set this as a secondary unique key if the values are unique.

    Note

    • You can only see this option for the number and free-text property types.

    • You can only select one property as a secondary unique key for a model. If this is grayed out, another property might already be used as the secondary unique key.

  7. If you want to make the values of this property translatable into other languages, select the Translatable option. This doesn't translate the property's name. That is taken care of by the user's browser's language preference setting.

  8. If you selected "Date" or "Date range" from theType list, you can also choose to include the time. Select the Include time option.

  9. Select ADD.

Follow-up task

Step 2: Add access control policies to your model

There are endless combinations of access control policies you can assign to your models. In this example, we're only assigning access to one role.

  • Role - "Experience designer"

  • Permission - "Allow"

  • View - Yes

  • Create - Yes

  • Update - Yes

  • Delete - Yes

Access_control.png

Use the below steps to add your access control policy with the above settings.

Add an access control policy
Prerequisite
Procedure

  1. From the Role list, select the user role for which you want to set access controls.

  2. From the Filters list, select all the applicable filters.

    Note

    You might not have any filters set up at this stage. In which case, it says "no data available" in the list. You can create a new filter at the bottom of the page, which appears in the Filters list. See further on in this article for help with setting up filters.

  3. From the Permission list, choose whether to allow or deny access.

  4. Decide which activities you want this role to perform:

    • View - Allows users with the specified role to view the content only.

    • Create - Allows users with the specified role to create additional content.

    • Update - Allows users with the specified role to make changes to the content.

    • Delete - Allows users with the specified role to delete the content.

    Tip

    You can allow a role to perform a combination of activities. For example, an Experience designer might need to have access to all activities. Therefore, you would select all of the options. On the other hand, an Employee might only need to view the content, so select the View option and leave the other options clear.

  5. You can apply access controls for each role that you have set up.

  6. To assign a new role access control, click the green plus symbol.

  7. When you are happy with your configuration, select SAVE.

Follow-up tasks

Step 3: Add a new page

The next step is to add a page to input your employee information.

  • Give your page a title - "Edit person"

Add a new page and header
Watch the video
Add a page

  1. On the Admin home page, select Pages, and then select NEW PAGE.

    New_page.png

  2. In the Give your page a title box, type in the title for your page and select the checkmark.

    Title.png

  3. Next, add some content to your page. See the follow-up tasks.

Optionally, add a header and create a menu.

You can add a header to the top of your page to represent a page's content. For example, a profile page may have a header containing a photograph and job information about a person and a sub-menu to link to related content.

Note

You can only add a page to one menu.

  1. At the top of your page, select ADD HEADER.

    Add_header.png

  2. In the Add page header dialog box, from the Menu list, select Create a new menu.

    AddPageHeader.png

  3. In the Name of New Menu box, type in the name for your menu item so that you know what this is. This name is not shown to users. It's only for your reference. You can't change this once you have saved your settings.

  4. In the Label box, type the text that you want to appear to users.

  5. From the Icon list, choose an icon to represent your menu item and choose a color for your icon.

  6. Optionally, from the Restrict devices list, select which devices to hide this menu on.

  7. Under the Page header section, from the Model name list, select the model to which this page relates.

    Note

    If you have not set up access control for any users on your model, you can't view this page. See our knowledge base article, Configure your model's access control policies.

    AddPageHeader2.png

  8. From the Header options, choose to either Create a new header or Choose from an existing one:

    • Create a new header

      1. In the Header name box, type in a meaningful name for your header.

      2. Under the Text section, from the Title list and the Subtitle list, select a property. The user sees these.

        AddPageHeader3.png

      3. Under the Avatar section, from the Style options, choose if you want to display the avatar or an image:

        • Avatar / Image

          1. From the Image property list, select the model's property to use as the avatar. You might have multiple ones defined in your model. You can only choose one.

          2. From the Placeholder text list, select the model's property to use when there is no image to display.

          3. If you want a little colored circle in the bottom left of the avatar to indicate a person's availability, select the Use a badge option. To use this option, you must set up the Badge color property in your model.

            AddPageHeader4.png

        • Icon

          1. From the Icon property list, select the model's property to use as the icon. You might have multiple ones defined in your model. You can only choose one.

          2. From the Icon color property list, select the model's property to use for the.

          3. If you want a little colored circle in the bottom left of the icon to indicate a person's availability, select the Use a badge option. To use this option, you must set up the Badge color property in your model.

      4. Under the Actions section, add any action buttons that you want to include. You can create multiple buttons within your header that can redirect to another page, either internally or externally.

        1. Title

        2. Type of action

        3. Target

        4. Icon

          AddPageHeader5.png

      5. Under the Chips section, if you want to add colored tags that sit within your item to illustrate an action. For example, a chip on leave requests to indicate "Paid" or "Unpaid" leave. It's good practice to use chips to highlight exceptions rather than norms, so you would use only the "Unpaid" chip because normally, leave would be paid leave.

        1. From the Property list, select the model's property to use.

        2. From the Condition options, select either is true or is false.

        3. In the Text box, type in what you want to appear on the chip.

        4. Choose the Color of your chip.

        5. From the Icon list, choose the one that you want to use.

          AddPageHeader6.png

    • Choose an existing header

      • From the Header to use list, select the header you want to use.

  9. When you're happy with your settings, select SAVE.

Optionally, add your page to an existing sub-menu.

  1. On the page in edit mode, select ADD PAGE TO SUB-MENU.

  2. In the Add page to sub-menu dialog box, from the Menu list, select the menu where you want to add your page or if you want to create a menu, select the Create a new menu option.

Step 4: Add a form block to your page

The next step is to add a form block to your page to input our employee information.

  • Title - "Edit person"

  • Model - "Person"

Form_content_updated_2.png
Add a Form block
Prerequisites
Procedure
1. Add a Form block to your page.

  1. On your page, select ADD CONTENT and in the Content dialog box, select the Form block.

  2. Scroll down and in the Title box, type in a meaningful title for your form.

  3. From the Model list, select the model you set up for this form.

  4. Select SAVE.

2. Choose the model data properties you want to capture.

  1. In the Properties list, select X on any properties you don't want to include.

    Choose_data.png

  2. Allow related models to be updated in the same form - you may have occasions where you need to update related models at the same time as updating your main model. For example, if you have a form to change someone's manager and update the manager, you may need to update new direct reports and/or add multiple attachments to the form. This is where multi rows come in. To enable you to create a multi-row, your main model needs to have a child model connected to it.

  3. Select CONTINUE.

3. Design how you want your form to look.

Applaud orders your form fields in the order of the model's properties in the previous step. Select a field to see the edit options:

Extra_options.png

  • Drag and drop - select and drag the gray bar above the form field to your desired spot and release when you are happy.

  • Delete - Select the trash icon in the gray bar to delete the field from your form.

  • Edit - Select the pencil icon to open the Edit field dialog box. Applaud opens the relevant edit dialog box with relevant options depending on the field type or submit button:

Edit text field
Procedure

  1. From the Type list, select:

    • Input - The user can enter text alphanumerically in a standard-sized field.

      Input.png

    • Password - The user can enter text in a password format and select the eye icon to toggle between showing the password and hiding the password.

      Password.png

    • Text area - The user can type freely into a large text box. When you select this type, the Allow rich text entry option is shown. See further on in this procedure.

      Text_area.png

  2. Choose how you want the field Label to appear:

    • Inherit from model property - Uses the property name as the field label.

    • Override - You can change the field label completely. Choosing this option shows a new Override label box, where you can type the new field label you want to appear to the user.

    • Hide - Hides the field label from the user.

      Note

      If you hide the field label, we recommend providing either Placeholder text or some Help text so your users know what to do with the form field.

  3. In the Placeholder box, type the text to appear inside the field when the user hasn't entered a value yet, for example, "Enter your full name."

  4. To hide the field from the form, clear the Visible option.

  5. To make sure the user completes the field, select the Required option. Otherwise, the user can submit the form without completing this field.

  6. If you want the field to appear on the form without the user editing it, you can clear the Enabled option.

  7. If you selected "Text area" from the Type list, you can let the user format the text and add images, links or videos by selecting the Allow rich text entry option.

  8. To provide some help to the user and instruct them what they need to enter in the field, under the Help text section, type in your instructions.

  9. To prevent the user from typing in too much in a rich text field, select the Character limit.

Edit email field
Procedure

  1. Choose how you want the field Label to appear:

    • Inherit from model property - Uses the property name as the field label.

    • Override - You can change the field label completely. Choosing this option shows a new Override label box, where you can type the new field label you want to appear to the user.

    • Hide - Hides the field label from the user.

      Note

      If you hide the field label, we recommend providing either Placeholder text or some Help text so your users know what to do with the form field.

  2. In the Placeholder box, type the text to appear inside the field when the user hasn't entered a value yet, for example, "Enter your full name."

  3. To hide the field from the form, clear the Visible option.

  4. To make sure the user completes the field, select the Required option. Otherwise, the user can submit the form without completing this field.

  5. If you want the field to appear on the form without the user editing it, you can clear the Enabled option.

  6. To provide some help to the user and instruct them what they need to enter in the field, under the Help text section, type in your instructions.

  7. To prevent the user from typing in too much in a rich text field, select the Character limit.

  8. If you want to validate email addresses, select the Enable advanced email verification option.

Edit date field
Procedure

  1. Choose how you want the field Label to appear:

    • Inherit from model property - Uses the property name as the field label.

    • Override - You can change the field label completely. Choosing this option shows a new Override label box, where you can type the new field label you want to appear to the user.

    • Hide - Hides the field label from the user.

      Note

      If you hide the field label, we recommend providing either Placeholder text or some Help text so your users know what to do with the form field.

  2. In the Placeholder box, type the text to appear inside the field when the user hasn't entered a value yet, for example, "Enter your full name."

  3. To hide the field from the form, clear the Visible option.

  4. To make sure the user completes the field, select the Required option. Otherwise, the user can submit the form without completing this field.

  5. If you want the field to appear on the form without the user editing it, you can clear the Enabled option.

  6. To provide some help to the user and instruct them what they need to enter in the field, under the Help text section, type in your instructions.

  7. If you want to control what dates the user can choose in this date field, select to display the Advanced date restrictions:

    1. To ensure the user can't select a date earlier than a specified date, from the Earliest date allowed date picker, choose the date you want.

    2. To ensure the user can't select a date later than a specified date, from the Latest date allowed date picker, choose the date you want.

    3. If you want to prevent the user from selecting certain days, in the Allowed days box, remove the days you want to deny.

    4. To prevent the user from selecting certain dates, such as public holidays, under the Disallowed dates section, add the dates you want to prevent your user from selecting.

Edit date range fields
Procedure

  1. Choose how you want the field Label to appear:

    • Inherit from model property - Uses the property name as the field label.

    • Override - You can change the field label completely. Choosing this option shows a new Override label box, where you can type the new field label you want to appear to the user.

    • Hide - Hides the field label from the user.

      Note

      If you hide the field label, we recommend providing either Placeholder text or some Help text so your users know what to do with the form field.

  2. In the Placeholder box, type the text to appear inside the field when the user hasn't entered a value yet, for example, "Enter your full name."

  3. To hide the field from the form, clear the Visible option.

  4. To make sure the user completes the field, select the Required option. Otherwise, the user can submit the form without completing this field.

  5. If you want the field to appear on the form without the user editing it, you can clear the Enabled option.

  6. To provide some help to the user and instruct them what they need to enter in the field, under the Help text section, type in your instructions.

  7. Under the Start date and End date sections:

    1. In the Label box, type in the text you want to appear for the start or end date field label.

    2. To make sure the user completes the field, select the Required option. Otherwise, the user can submit the form without completing this field.

    3. If you want the field to appear on the form without the user editing it, you can clear the Enabled option.

    4. If you want to control what dates the user can choose in this date field, select to display the Advanced date restrictions:

      1. To ensure the user can't select a date earlier than a specified date, from the Earliest date allowed date picker, choose the date you want.

      2. To ensure the user can't select a date later than a specified date, from the Latest date allowed date picker, choose the date you want.

      3. If you want to prevent the user from selecting certain days, in the Allowed days box, remove the days you want to deny.

      4. To prevent the user from selecting certain dates, such as public holidays, under the Disallowed dates section, add the dates you want to prevent your user from selecting.

Edit select-single field

Usually a foreign key property. The foreign key links to another model and that model's default label value appear in the list automatically. If you want to change the value in the list, you need to set the property whose value you want to appear in the list as the default label in the model.

Note

If the property has no values, it shows empty objects.

Procedure

  1. From the Type lists, select:

    • Select Single - The user can select one option from a list.

      ForeignKeyForm.png

    • Radio - The user selects a radio button from a list.

      ForeignKeyRadio.png

  2. Choose how you want the field Label to appear:

    • Inherit from model property - Uses the property name as the field label.

    • Override - You can change the field label completely. Choosing this option shows a new Override label box, where you can type the new field label you want to appear to the user.

    • Hide - Hides the field label from the user.

      Note

      If you hide the field label, we recommend providing either Placeholder text or some Help text so your users know what to do with the form field.

  3. In the Placeholder box, type the text to appear inside the field when the user hasn't entered a value yet, for example, "Enter your full name."

  4. To hide the field from the form, clear the Visible option.

  5. To make sure the user completes the field, select the Required option. Otherwise, the user can submit the form without completing this field.

  6. If you want the field to appear on the form without the user editing it, you can clear the Enabled option.

  7. To provide some help to the user and instruct them what they need to enter in the field, under the Help text section, type in your instructions.

  8. If you want the user to type in the field to reduce the items in the list shown, select the Allow autocomplete option.

    Autocomplete.png

    1. When you select the Allow autocomplete option, you can also let the user type in a new value. Select the Allow dynamic entry of a new value option.

    2. The Spell check option is selected by default, but you can clear this to prevent the spell check function.

  9. This field is based on a foreign key property, linking back to the same or a different model. Either way, you can choose whichever property in the model you want. The values of your chosen property show in a list that the user can choose one from. From the Label property list, select the property whose values you want to appear in the list for the user to select.

    LabelProperty.png

  10. If you want the field to only show values that match certain conditions, under the Use advanced filters section, select the Filter the selection choices using advanced criteria option.

    Note

    If no values match your applied filter, no values appear in the field list.

    1. Select the plus icon under either the Meet All of the following conditions (and) or the Meet ANY of the following conditions (or) section.

    2. From the Property lists, select any one of the linked properties that appear in the list.

    3. From the list of Criteria, choose the condition you want the property value to meet.

    4. Depending on the property and condition you've chosen, choose a Value from the list or type in your own.

Edit submit button
Procedure

  1. In the id box, type a unique ID you want the API to use and in the Button label box, type the text you want to appear as the submit button label.

  2. If you want to prevent the form from being submitted, clear the Visible option, and if you want to disable the submit button, clear the Enabled option.

  3. From the Style list, if you want the button to be a regular rectangle, select Regular. Otherwise, if you want the button to be a filled circle, select Circular Action Button.

  4. If you selected "Regular" from the Style list, from the Weight list, select if you want the button to be "Normal" or "Light" weight.

  5. From the Color palette, select the feeling color you want the button.

  6. From the Icon list, search for and select the icon you want to appear in the button.

    RegularNormal.png

    A Regular, Normal button.
    RegularLight.png

    A Regular, Light button.
    RoundButton.png

    A Circular Action Button

  7. If you want to redirect the user after they submit their form to another page in your tenant, under the Redirection section, select Redirect to a different page , and from the Page list, select the page you want to open and how you want it to open from the Open as list.

  8. Select UPDATE.

4. Add a button, choose other design options, and filter the data you want to appear in your block.
General content settings

Optionally, add a button that opens one of the pages in your tenant or an external URL.

Action buttons

  1. Under General content settings, next to Action buttons* select, Add_.PNG.

  2. In the Title box, type in the text that you want to appear on your button.

  3. Under the Type of action section, from the Opens in: list, select what and how you want the button to open.

    • Open page - Loads the Target list with pages from your Applaud tenant.

    • URL - You need to type in the full website address in the Target box.

    • Regular / Same tab - Takes the user away from the current page to the new page.

    • Modal - Keeps the user on the page but opens a dialog box with the new page contained in it.

    • New tab - Opens a new tab in the user's browser with the new external website.

  4. From the Target list, select a page from the list of available pages in your Applaud tenant or type the full URL address, for example, https://www.google.com.

  5. From the Icon list, select an icon for your button and from the Color picker, select a color for your button.

  6. From the Weight list, select how you want your button to appear:

    • Normal - The button appears with a colored rectangle background with black text.

    • Light - The button doesn't have a background, and the text is the color you selected.

  7. From the Hide/show based on a model property list, select a property, and then from the Condition list, select either the Hide if true option or the Show if true option.

Other general settings

  1. If you don't want a title on your block, clear the Show the title and header bar option.

    Caution

    Hiding the title and header bar also hides any action buttons you may have included.

  2. To configure how wide you want your block, from the Preferred width list, select an option:

    Note

    These options are affected by your Page layout options, which you configure in the Page settings dialog. See our knowledge base article, Configure your page settings.

    • Automatic - Spans the width of the column on the page depending on what page layout option you have selected.

    • Full-width - Spans the width of all columns but doesn't go beyond the margins on either side of the page unless you select the Edge-to-edge option.

    • Two-third - If you have a three-column page layout, this spans across two of the columns. If you have a two-column page layout set, this spans just beyond the first column, but further blocks won't appear above the advert in the second column, only below it.

    • Half-width - If you have the three-column page layout, this spans across a column and a half. If you have a two-column page layout, this spans one column.

  3. To set the Background color of your block, select the color of your choice. The color picker shows a list of preconfigured colors with 100% opacity or fully opaque.

    Tip

    You can select a pre-configured color nearest to the one you want and then tweak it to what you want using the sliders.

    ColorPicker.png

    1. Color palette

    A chart of preconfigured colors.

    2. Color gradient panel

    The color gradient panel shows a mixture of two linear color gradients, your chosen color, and black. The color you choose reflects in the color gradient panel instantly showing where your selected color appears on the panel. You can choose a lighter or darker version of the chosen color from the panel.

    3. Sample color

    Shows the color you've chosen, and that will be applied.

    4. Hue slider

    This slider has a linear gradient of colors. You can choose the main hue you want.

    5. Opacity slider

    Controls the transparency of the color.

    6. Color mode

    This switches between the color value modes:

    • HEX - Sets the color based on a Hexadecimal code value.

    • RGBA - Sets the color based on RBGA (red, green, blue, alpha) decimal values.

      RGBA.png

    • HSLA - Sets the color based on HSLA (hue, saturation, lightness, alpha) values.

      HSLA.png

  4. If you want to prevent this block from being displayed on specific devices from the Hide on list, select those conditions where you want to hide this block.

  5. Restrict or allow viewing further by adding custom filters to your block. You can base these filters on anything such as role type, department, or location. Select the Hide or show this block using filters option and set your Conditions.

    If you want to hide this block when the selected data meets every condition you add, add a condition under the Hide when ALL of the following conditions are met (and) section. Otherwise, if you want to hide the block when the selected data meets just one of several conditions, add your conditions under the Hide when ANY of the following conditions are met (or) section.

    1. Under the relevant section, select Add_.PNG.

    2. From the Property list, select the model's property.

    3. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.

    4. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.

Edit submission settings
Procedure

  1. In the Button label box, type the text you want to appear on your submit button.

  2. If you want to prevent the form from being submitted, clear the Visible option, and if you want to disable the submit button, clear the Enabled option.

  3. From the Weight list, select if you want the button to be "Normal" or "Light" weight.

  4. From the Color palette, select the feeling color you want the button.

  5. From the Icon list, search for and select the icon you want to appear in the button.

  6. If you want to redirect the user after they submit their form to another page in your tenant, under the Redirection section, select Redirect to a different page , and from the Page list, select the page you want to open and how you want it to open from the Open as list.

  7. Select UPDATE.

5. Optionally, add an interaction to your block.
Add a new form interaction
Prerequisite
Procedure
1. Create your form interaction.

  1. Add or edit a form, and at the bottom of the Content page in the Form interactions section, in the top-right, select Add interaction.

    Add_interaction.png

  2. In the Title box, type in a meaningful title for your interaction.

    Interaction_1.png

  3. From the Applies to list, select when you want the action to apply to the form:

    • Create - When the form is not opened from an existing record, and no ID is passed into the form. For example, when adding a new person to a directory.

    • Update - When the form is opened from an existing record, and an ID is passed into the form. For example, when you open the form from another page to update the details of a record such as editing a person's details on a directory.

2. Choose under what conditions you want the action to take effect.

Conditions start actions when the property value meets the conditions you set. They are like the start of an if-then statement. They can check against the properties of the trigger event and properties of objects involved in the event. Conditions can check simple yes or no properties. They can also check for more complex properties that check against strings or decimals. A string property is a selection of text, and a decimal property is a number.

If you want to trigger this action when the criteria meet every condition, add a condition under the Meet ALL of the following conditions (and) section. Otherwise, if you want to trigger this action when the criteria meet just one of several conditions, add your target under the And meet AT LEAST ONE of the following conditions (or) section.

  1. Under the relevant section, select ADD CONDITION.

  2. From the Field list, select the form field to which you want to apply the condition.

  3. From the Criteria list, select your criteria. The available criteria depend on the form field that you selected.

  4. If you selected criteria that require a value, in the Value box, type in the value you want the criteria to meet.

3. Configure what you want to happen to the form component when all conditions are met.

  1. Under the Actions section, select ADD ACTION.

  2. From the Type of actions list, select either:

    • Set Attribute - This action sets selected attribute values for selected fields based condition satisfied if any

    • Clear Attribute - This action clears the selected attribute values for the field

  3. From the Target Field list, select a field from your form to which to add the action. This can be either a model property or a form content you have added when designing your form.

  4. From the Target Attribute list, select how you want the action button to appear.

    • Help text:

      • If you selected Set Attribute, this sets the Help text to what you enter in the action's Value field.

        HelpText.png

      • If you selected the Clear Attribute, this clears the Help text from the field if any was present. You can also set the help text for form content added to your form when designing it on the Content page.

        HelpTextClear.png

    • Label:

      • If you selected Set Attribute, this sets the Label you enter in the action's Value field.

        Label.png

      • If you selected the Clear Attribute, this clears the label of the selected field. You can also set the label for form content added to your form when designing it on the Content page.

        ClearLabel.png

    • Required:

      • Changes the action Value to an option you can select or clear. When selected, the field is required. When clear, the field is optional. If the property was set to be required in the model, you could change it here.

        Action's value is selected.

        Required.png

        Action's value is cleared.

        HelpTextClear.png

    • Enable:

      • Changes the action Value to an option you can select or clear. When selected, the field is read-only. When clear, the field is editable.

        Read-only when the enable value option is cleared.

        ReadOnly.png

        Editable when the enable value option is selected.

        Enabled.png

    • Value:

      • If you selected Set Attribute, this sets the field's value to what you enter in the action Value.

        Enabled.png

      • If you selected the Clear Attribute, this clears the selected field's value. You can also set the value for form content added to your form when designing it on the Content page.

        HelpTextClear.png

    • Visible:

      • Changes the action Value to an option you can select or clear. When selected, the field is visible. When clear, the field is hidden. You can also set the visibility for form content added to your form when designing it on the Content page.

  5. If you selected the Clear Attribute option from the Type of actions list, the action's Value is not needed and hidden. If you selected the Set Attribute from the Type of actions list, you need to either type in the text that you want to appear or make a selection. This field varies depending on the Target Attribute you selected:

    • Help text - A rich text box appears so you can configure the help text you want to show.

    • Label - A text box appears so you can type in the new label for your form's field.

    • Required - Shows a Value option for you to select to make the field mandatory or to clear it to make the field optional.

    • Enable - Shows a Value option for you to select to make the field changeable or clear it to disable the field when the conditions are met. You can still see the field's value, but you can't amend this.

    • Value - Shows a field so you can either type in or select a value. For example, if the Target Field is a text field, you need to type in a value. If it is a drop-down list, you need to select from the list. If the field is a date, you need to choose a date.

    • Visible - Shows a Value option for you to select to make the field visible when the conditions are met or clear to hide the field when the options are met.

You have successfully created your employee directory form.

Step 5: Create your employee profiles

The next step is to add your employee details. For this tutorial, we have created six example employees, but you can use your own employees' details.

Example_employees.png

Open your Edit person page and for each employee enter these details into the matching field one by one:

  • Avatar - Upload a photo of the employee. We accept .gif, .jpeg, .jpg or .png files.

  • Full name - Enter your employee's full name.

  • Role - Enter their role.

  • Department - Select their department from the list.

  • Email address - Enter their email address.

  • Extension number - Enter their extension number if they have one.

Step 6: Create an additional page

The next step is to create a page to display our employee directory. Add a page as you did in step 3.

  • Give your page a name - Enter a meaningful title for your page. As the purpose of this page is to display our employee directory, we are calling it the "Employee directory."

Step 7: Create a list block

The next step is to create a list block to display our employee directory. Add content as you did in step 4.

a: Add a list block to your page

  • Title - Enter a meaningful title. We're using "Employee directory."

  • Model - Select the model to which this list relates. We're selecting the Person model that we created in Step 1.

b: Choose your data and design your list

You now need to choose your list data and design your list. See step 4 for a reminder of the procedure.

  • Layouts - "Grid"

  • Features - "Text," "Avatar / icon / image," "Secondary actions."

  • Text

    • Title - "Full name," "Role."

    • Subtitle - "Extension number," "Email address."

    • Overline - "Department"

  • Avatar / icon / image - "Avatar"

    • Image property - "Avatar"

    • Placeholder text - "Full name"

  • Secondary actions

    • Title - "Edit person"

    • Type of action - "Open page - regular"

    • Target - "Edit person"

    • Icon - Choose an icon that illustrates your intent. We are using an "edit" icon.

  • General content settings

    • Preferred with - "Automatic"

Congratulations! You've successfully created a simple employee directory.

Was this article helpful?

Help us improve our documentation

0 out of 0 found this helpful