Tutorials

Here are plenty of video guides to help you set up, use and learn about the different functions available to you when you use Dataflex Link.

• Installation Tutorial

  In this playlist we set up a license key and download Dataflex Link.

  Download, install and set up

• Example Database & Searches Tutorial

  In this playlist of tutorials we go through creating a database application step by step. Hopefully this can help you with ideas in creating your own applications.

  Creating a sample app

• Creating a Database

  How to create a simple database.

  Create a database

• Adding Fields to a Database

  This playlist shows the functionality of each field type added to a database.

  Adding each field type

• Configuring Dataflex Link Search Engines

  This playlist shows the dynamism of searching your data with easy to configure search entry forms.

  Search engines

• Access Control

  This playlist shows how we can manage access to our databases and searches.

  Access Control

• Sharing Database Items across Social Media

  If you want your database items to be shared across the internet, these tutorials will show you how to set up a database to facilitate and promote social media sharing.

  Social media sharing

• Dataflex Link's built-in Contact Platform

  You can set up Dataflex Link to allow users to make contact with owners of individual database entries. This playlist shows how the 3 different methods of contact work. It also shows how spam protection can be set up.

  Contacting database item owners

• The Options Page

  The options page has settings which apply to all databases and searches. Take a look through these tutorials to find out how.

  Options for all databases and searches

• Reference Videos

  Look through this playlist for helpful tutorials on specific topics.

  Helpful videos

• Advanced Videos

  This playlist makes use of the dataflex_link_form_field_before action to add data to a field automatically.

  Action: dataflex_link_form_field_before (a link to the PHP and JavaScript code used in this tutorial is included in the last video of this playlist.)

To use a Dataflex Link database or search engine, you must add the [dataflex-link] shortcode to the page you want it to appear in.

The shortcode for a database or search is available on the settings page of that database or search.

Shortcode settings are simply words added inside a shortcode's brackets to change the behaviour of a database. For Dataflex Link this would look similar to [dataflex-link setting=""]

• Display the form for a database or search engine

  [dataflex-link database="number"] This setting is mandatory. It establishes which database or search we're going to use. Every search or database has it's own id. You'll find each id in your list of databases & on the Wordpress dashboard. Just click the Dataflex Link icon on the left. If we're using database 6 the shortcode would be [dataflex-link database="6"]

• Hide a form's title

  [dataflex-link database="3" show-form-title="false"] Using this setting and setting it as false will prevent the form's heading showing on the page. If this setting isn't used, or is set to true, the form title wlll show.

• Receive an email with all database entries

  [dataflex-link database="3" fetch-checkbox="true"] If you wish your users to receive an email with all their database entries, use this shortcode setting. Beware though, this will only work if the database settings allow it. To allow it, on your WordPress dashboard do the following:

  1. Click Dataflex Link
  2. Under the database Id, click Edit
  3. At the top of the page, click Database Settings
  4. Click Edit Settings
  5. Click Retrieving Entries
  6. Check/ tick the Enable Item Retrieval checkbox
  7. Optionally add an email title and choose a field to give a title to each entry sent
  8. Click Save Settings

• Show only a connection to use secure databases

  [dataflex-link database="1" connection-only="true"] Connections are covered in a different section, and their use depends on the Access Control settings of the database. Assuming these access control settings are set appropriately, this shortcode setting allows users to create a connection only. It will not display the database form before or after connection. This is useful if you want a Connect (login) page.

• Add a button to show a user's entries only

  ⚠️IMPORTANT: The database ID must be that of a search with a minimum score of 0

  [dataflex-link database="4" search-my-items-button="true"] This works only with a database connection and a search with a minimum score of 0. It will show a button to retrieve all items added to the source database for the user who is connected. If there is no database connection, the "create padlock" box will display when the button is clicked. Remember the "database" must be a search. In this example, database 4 is a search of database 1. We advise you create a separate database search for this purpose. You can create other searches for specific app criteria.

• Change default text for a button showing user's entries

  [dataflex-link database="3" search-my-items-text="Your text for the button"] When using the search-my-items-button="true" shortcode attribute (see above), add search-my-items-text="anything you like" to give the button your own text.

• Set which page a database entry uses

  [dataflex-link database="4" use-as-link="true"] If this is set, this will tell Dataflex Link that you want individual database entries for database 4 to show on this page. Links to database entries will be created by Dataflex Link to appear on this page. This is useful if you want to add content before or after the shortcode. Note: if you wish the page to be used by links to database entries only, see the Set a page to display any single entry only section below.

• Set a page to display any single entry only (read or edit)

  [dataflex-link database="3" read-edit-only="true"] If you want a page to be used to display individual entries only, either for sharing or editing or archiving, use this shortcode. If the page is loaded without a link to a specific entry, the user will get the message "You have used an invalid link".

• Set a page to display only

  [dataflex-link database="3" display-only="true"] Use this shortcode if you want a page which display's single entries to display an entry only, and not allow editing or archiving.

To make Dataflex Link fit your website or web app branding, you will need to use Dataflex Link's built-in HTML markup and apply CSS rules appropriate to your branding. The sections below show the markup available to you.

Important Note: Dataflex Link is owned by Web Dewd, and all markup uses .web-dewd-forms prefixes.

• Data Entry & Search Forms

  These are the forms a user can fill in, either to input data or search a database.

  General CSS Paths

  These settings apply to all data entry forms and their fields.

  • .web-dewd-forms-form-heading.panel-heading .panel-title

    Targets the heading of the form.

  • .web-dewd-forms.panel-body

    Targets the container of the form. Every other element of the form will be a child of this CSS path.

  • .web-dewd-forms.panel-body form

    Targets the the form itself, including all labels, fields and buttons.

  • .web-dewd-forms.panel-body form .control-label

    Targets all field labels.

  • .web-dewd-forms.panel-body .form-control

    Targets all data entry fields except checkboxes.

  • .web-dewd-forms.panel-body .web-dewd-forms-checkbox

    Targets all checkboxes.

  • .web-dewd-file-upload-button.btn.btn-success

    Targets image upload buttons.

  • web-dewd-recaptcha-element .grecaptcha_container

    Targets the element which houses the recaptcha robot box.

  Buttons

  Note: For buttons which are disabled, you may wish to change the opacity property to 1.

  • .web-dewd-forms.panel-body .form-group.web-dewd-forms-submit-actions .btn-web-dewd-submit

    Targets the submit button.

  • .web-dewd-forms.panel-body .form-group.web-dewd-forms-submit-actions .btn-web-dewd-reset

    Targets the reset button.

  • .web-dewd-forms.panel-body .form-group.web-dewd-forms-submit-actions .btn-web-dewd-results

    Targets the display results button.

  • .web-dewd-forms.panel-body .form-group .btn-web-dewd-forms-connect

    Targets the create padlock button.

  Paths for specific forms created

  These settings apply to forms you have created. Each form and each input for a form has its own id. In these examples, we're going to use the following example id's:

  Remember, if you wish to target more than one form or field specifically you can separate CSS paths with commas. However, it is not recommended to target all forms or fields collectively this way. Instead use one of the general settings.

  • The example form id is "a1B2c3456D_1".
  • The example field id is "_123456789_12345".

  Individual Forms

  To find a form's id, go to the form's settings from your WordPress Dashboard. A form's id is highlighted in this image.

  

  • #a1B2c3456D_1_container.web-dewd-forms

    Targets the forms container. Every element of this form is a child of this CSS path.

  • #a1B2c3456D_1_container.web-dewd-forms form#a1B2c3456D_1

    Targets the form itself.

  Individual Fields

  To find a field's id, go to the form's settings from your WordPress Dashboard. A field's id as highlighted in this example image.

  

  • .web-dewd-forms.panel-body form [for=_123456789_12345].control-label

    Targets the label of this field only.

  • #_123456789_12345.form-control

    Targets the input of this field only.

  Read-only Fields

  Taking note of the Field Id you want to target as per the image above use the following markup.

  • .web-dewd-forms.panel-body form .web-dewd-forms-readonly-container [for=_123456789_12345].control-label

    Targets the label of this specific read-only field.

  • .web-dewd-forms.panel-body form .web-dewd-forms-readonly-container #_123456789_12345_container.form-control.web-dewd-forms-readonly

    Targets the input of this specific read-only field.

  • .web-dewd-forms.panel-body form .web-dewd-forms-readonly-container.web-dewd-forms-readonly-no-content

    Targets empty fields. This will target both the label and the field. You can make the CSS more specific to label or field as per the 2 sections above. Just change .web-dewd-forms-readonly-container to .web-dewd-forms-readonly-container.web-dewd-forms-readonly-no-content.

• Modals (Pop-ups)

  Dataflex Link uses 4 types of modal. Confirmation, action, alert and search results. Each modal has its own markup.

  Action Modal

  An action modal requires a decision and maybe input from the user.

  • .web-dewd-forms-action.modal .modal-dialog .modal-content

    Targets the action modal itself. Every other element of the action modal will be a child of this CSS path.

  • .web-dewd-forms-action-title

    Targets the title of the action modal.

  • .web-dewd-forms-action-text

    Targets the text of the action modal.

  • #web_dewd_forms_action_input

    Targets any standard input of an action modal

    #web_dewd_forms_action_email

    Targets the email input of an action modal

  • web-dewd-recaptcha-element .grecaptcha_container

    Targets the element which houses the recaptcha robot box.

  • .btn.btn-web-dewd-action-confirm.btn-warning

    Targets the confirmation button of an action modal

    .btn.btn-web-dewd-action-cancel.btn-info

    Targets the cancel button of an action modal

  Alert Modal

  An alert modal warns the user of something and provides a confirmation button.

  • .web-dewd-forms-alert .modal-dialog .modal-content

    Targets the alert modal itself. Every other element of the alert modal will be a child of this CSS path.

  • .web-dewd-forms-alert-title

    Targets the title of the alert modal.

  • .web-dewd-forms-alert-text

    Targets the text of the alert modal.

  • .btn.btn-web-dewd-alert-confirm.btn-primary

    Targets the confirm button of an alert modal

  Confirmation Modal

  A confirmation modal advises the user of a successful entry submission to the server.

  • .web-dewd-forms-confirmation .modal-dialog .modal-content

    Targets the confirmation modal itself. Every other element of the confirmation modal will be a child of this CSS path.

  • .web-dewd-forms-confirmation-content

    Targets the content of the modal. The content is defined in the database/ search's database settings in the Entry Confirmation section.

  • .web-dewd-share-link

    If a form is set up to be able to share entries added, this path will target the sharing icons.

  • .btn.btn-web-dewd-confirmation-confirm.btn-primary

    Targets the confirm button of a confirmation modal

  Search Results Modal

  A search results modal displays a confirmation message and any results which match the search.

  • .web-dewd-forms-search-results .modal-dialog .modal-content

    Targets the search results modal itself. Every other element of the search results modal will be a child of this CSS path.

  • .web-dewd-results-confirmation-content

    Targets the confirmation section of the modal. The content is defined in the database/ search's database settings in the Entry Confirmation section.

  • .web-dewd-results-paragraph

    Targets the search results title. The content is defined in the database/ search's database settings in the Search section.

  • .btn.btn-web-dewd.btn-primary

    Targets the close button of a search results modal

  List of Results

  • .web-dewd-results-table.table

    Targets the list of search results.

  • .web-dewd-results-table thead tr th

    Targets the search results heading row cells.

  • .web-dewd-results-table.table tbody tr td

    Targets each cell of every row of search results.

  • [data-web-dewd-results-table].web-dewd-results-table .web-dewd-table-detail

    Targets the open button at the beginning of each row.

  Image Directly from Results List

  • .web-dewd-forms-search-result-image-modal .modal-dialog

    Targets an image's preview window opened directly from a results list.

  Result Detail

  • .web-dewd-results-table-container .web-dewd-results-detail-table-container

    Targets the box containing the data for the individual search entry.

  • .web-dewd-results-detail-table-container .web-dewd-results-detail-table thead

    Targets the heading of the individual search entry.

  • .web-dewd-results-table-container .web-dewd-results-detail-table-container .web-dewd-results-detail-table td:first-child

    Targets the field name for the individual search entry.

  • .web-dewd-results-table-container .web-dewd-results-detail-table-container .web-dewd-results-detail-table td:nth-child(2)

    Targets the data for the individual search entry.

• Controls Dropdown

  These CSS paths are for the controls dropdown which appears at the top of all forms where a user is connected or Entry Actions are available eg. Editing or Archiving.

  • .web-dewd-forms-client-controls-panel #web-dewd-forms-client-controls-panel-display

    This targets the controller's display/ hide toggler.

  • .web-dewd-forms-client-controls-panel .web-dewd-forms-manage-entry-actions-holder

    This targets the controller's fields container.

  • .web-dewd-forms-manage-entry-actions-holder .web-dewd-forms-session-manager-container

    This targets the session manager controls container. Contains the obfuscated email of the user connected.

• Other Components

  These CSS paths are for miscellaneous elements not covered the above categories.

  • button.btn.btn-web-dewd

    All buttons used by Dataflex Link have this CSS path. Unless you override this path, this should target all buttons.

  • .web-dewd-forms-get-my-items.btn.btn-success

    This targets a Get My Items button where the search-my-items-button="true" shortcode setting has been used.

WordPress actions and filters should be used by advanced WordPress users who have knowledge about PHP and creating functions.

For anyone who wishes to learn more about how actions and filters work there are many tutorials on YouTube and other platforms to guide you.

• Actions

  Executed when form is loaded by a user

  'dataflex_link_form_field_before'

  Usage: add_action('dataflex_link_form_field_before','callback_function');

  There are 3 Parameters sent to callback function:

  • [0] This will be either write or readonly.
    • When loading an empty form for input the value will be write.
    • When loading a completed form for read only or editing the value will be readonly.
  • [1] The value will be the label for the field.
  • [2] The value will be the field id.

• Filters

  There are currently no filters for Dataflex Link