extensions

extensions

  • Adding an Event (JEvents)

    • How to video:

    Overview

    JEvents is a third-party extension for Joomla! that allows you to add event information in either a calendar or list format.  As you create events, they will appear on your website in JEvents menu items or modules that have been configured to display events from the appropriate categories.


    Procedure

    1. Login to the Joomla! Administrator back-end.
    2. Click on "Components > JEvents"

      Components > JEvents

    3. At the JEvents Dashboard, hover the mouse over the left sidebar (or top menu, if the left sidebar does not appear), then select Manage Events.
      .
      1. JEvents left sidebar (larger browser sizes):
        JEvents Control Panel: Manage Events
      2. Top menu (smaller browser sizes):

        JEvents 3.6.x: Manage Events icon (top menu)
    4. Click the "New" button: JEvents "New" Button
    5. Enter a title for the event in the "Title" field (see #1 below).
    6. If your website has more than one calendar, select the appropriate one from the "Events calendar" dropdown menu (see #2 below).
    7. For Categories,select one or more categories that should display your event (see #3 below).
    8. Enter a short description of your event in the "Description" text box.  Note that you can format your description the same way you would format an article (see #4 below).
    9. Enter the location of your event in the "Location" field (found under the "Description" text box).

      JEvents 3.6.x: Create an event

    10. Click on the "Calendar" tab under the "JEvents" logo (see #1 below).
    11. Click the mini-calendar icon below "Start date" and select a start date for your event (see #2 below).
    12. Type a Start Time in the Start Time field and select "am" or "pm" (see #3 below).
    13. If the event will span more than one day, click the mini-calendar icon below "End date" and select an end date for your event.
    14. Type an End Time in the End Time field and select "am" or "pm" (see #4 below).
    15. Click "Save & Close" (see #5 below).

      JEvents: Set event date and time

     

    • Video Included: Video Included
  • Adding an Event (JEvents) (Joomla! 4)

    • How to video:

    Overview

    JEvents is a third-party extension for Joomla! that allows you to add event information in either a calendar or list format.  As you create events, they will appear on your website in JEvents menu items or modules that have been configured to display events from the appropriate categories.


    Procedure

    1. Login to the Joomla! Administrator back-end.
    2. Click on "Components > JEvents"

      JEvents Add

    3. At the JEvents Dashboard, hover the mouse over the left sidebar (or top menu, if the left sidebar does not appear), then select Manage Events.
      .
      1. JEvents left sidebar (larger browser sizes):
        JEvents Control Panel: Manage Events
      2. Top menu (smaller browser sizes):

        JEvents 3.6.x: Manage Events icon (top menu)
    4. Click the "New" button: JEvents "New" Button
    5. Enter a title for the event in the "Title" field (see #1 below).
    6. If your website has more than one calendar, select the appropriate one from the "Events calendar" dropdown menu (see #2 below).
    7. For Categories,select one or more categories that should display your event (see #3 below).
    8. Enter a short description of your event in the "Description" text box.  Note that you can format your description the same way you would format an article (see #4 below).
    9. Enter the location of your event in the "Location" field (found under the "Description" text box).

      JEvents 3.6.x: Create an event

    10. Click on the "Calendar" tab under the "JEvents" logo (see #1 below).
    11. Click the mini-calendar icon below "Start date" and select a start date for your event (see #2 below).
    12. Type a Start Time in the Start Time field and select "am" or "pm" (see #3 below).
    13. If the event will span more than one day, click the mini-calendar icon below "End date" and select an end date for your event.
    14. Type an End Time in the End Time field and select "am" or "pm" (see #4 below).
    15. Click "Save & Close" (see #5 below).

      JEvents: Set event date and time

     

    • Video Included: Video Included
  • Adding Images to Events using JEvents File Uploader Tool

    • How to video:

    This feature requires an up-to-date version of the JEvents plugin "JEvents - File and Image uploads for Event Descriptions". If you find that you cannot add an image to your event, please SUBMIT REQUEST to request us to install or update this JEvents plugin for your website.

    • Click on "Components > JEvents:
      Components > JEvents
    • At the JEvents Dashboard, hover the mouse over the left sidebar (or top menu, if the left sidebar does not appear), then select Manage Events.
      .
      • JEvents left sidebar (larger browser sizes):
        JEvents Control Panel: Manage Events
      • Top menu (smaller browser sizes):

        JEvents 3.6.x: Manage Events icon (top menu)
    • Either click the title of an existing event to add or Add a New Event.
    • If the event you're looking for doesn't appear, click SEARCH (see #1 below), then change " - Hide Past Events - " to "Show Past Events" (see #2 below):

      JEvents: Show past events

    • Scroll to the bottom of the Create an Event page (or Edit Event page, if you are editing an existing event)
    • Under “Upload Image,” click Choose File (see #1 below)
    • Browse to the image location on your computer and click "Open" (or "Select" or "Upload", depending on your browser and version).
    • Under “Image Title,” enter a title for your image (see #2 below)

      JEvents 3.6.x: Add image to event

    • Scroll back to the top of the page, then enter the remaining details for your event on the COMMON and CALENDAR tabs.
    • When done, click SAVE & CLOSE.
    • You can now view the event with the image on the front-end.

      JEvents 3.6.x: Sample event with image
    • Video Included: Video Included
  • Adding Images to Events using JEvents File Uploader Tool (Joomla! 4)

    • How to video:

    This feature requires an up-to-date version of the JEvents plugin "JEvents - File and Image uploads for Event Descriptions". If you find that you cannot add an image to your event, please SUBMIT REQUEST to request us to install or update this JEvents plugin for your website.

    • Click on "Components > JEvents:
      JEvents Add
    • At the JEvents Dashboard, hover the mouse over the left sidebar (or top menu, if the left sidebar does not appear), then select Manage Events.
      .
      • JEvents left sidebar (larger browser sizes):
        JEvents Control Panel: Manage Events
      • Top menu (smaller browser sizes):

        JEvents 3.6.x: Manage Events icon (top menu)
    • Either click the title of an existing event to add or Add a New Event.
    • If the event you're looking for doesn't appear, click SEARCH (see #1 below), then change " - Hide Past Events - " to "Show Past Events" (see #2 below):

      JEvents: Show past events

    • Scroll to the bottom of the Create an Event page (or Edit Event page, if you are editing an existing event)
    • Under “Upload Image,” click Choose File (see #1 below)
    • Browse to the image location on your computer and click "Open" (or "Select" or "Upload", depending on your browser and version).
    • Under “Image Title,” enter a title for your image (see #2 below)

      JEvents 3.6.x: Add image to event

    • Scroll back to the top of the page, then enter the remaining details for your event on the COMMON and CALENDAR tabs.
    • When done, click SAVE & CLOSE.
    • You can now view the event with the image on the front-end.

      JEvents 3.6.x: Sample event with image
    • Video Included: Video Included
  • Adding PDFs to events using JEvents file uploader tool

    • How to video:

    This feature requires an up-to-date version of the JEvents plugin. If you find that you cannot add a flyer to your event, please SUBMIT REQUEST to request us to update your JEvents plugin for your department.

    • Navigate to "Components > JEvents > Manage Events"
    • Either click the title of an existing event to add or Add a New Event.
    • Navigate to the section of the event labeled "Standard File 1"
      Where to find upload button in JEvent

    • Click on Choose File and select the PDF flyer from your computer system.
    • Click on Upload
    • Once you see the name of the flyer in the textbox, you can Save & Close out of the Event.
      Name of File

    • You can now view the event PDF as a link from your event on the front-end.
      Frontend

    • Video Included: Video Included
  • Adding PDFs to events using JEvents file uploader tool (Joomla! 4)

    • How to video:

    This feature requires an up-to-date version of the JEvents plugin. If you find that you cannot add a flyer to your event, please SUBMIT REQUEST to request us to update your JEvents plugin for your department.

    • Navigate to "Components > JEvents > Manage Events"
    • Either click the title of an existing event to add or Add a New Event.
    • Navigate to the section of the event labeled "Standard File 1"
      Where to find upload button in JEvent

    • Click on Choose File and select the PDF flyer from your computer system.
    • Click on Upload
    • Once you see the name of the flyer in the textbox, you can Save & Close out of the Event.
      Name of File

    • You can now view the event PDF as a link from your event on the front-end.
      Frontend

    • Video Included: Video Included
  • Adding Videos to Ignite Gallery - Youtube/Vimeo

    Overview

    There is now an easier way to upload YouTube videos and thumbnails onto your Joomla site!  Please note, this will not work with Kaltura Videos

    Recommended: Your video should be uploaded to the Rutgers YouTube Channel before proceeding.

     Also review more details about videos with SAS: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/699-video-hosting-options-at-rutgers

    Procedure

    1. In the file upload menu of Ignite Gallery now there is a field to upload a YouTube/Vimeo URL instead of uploading a file directly.Once you have typed in your URL press the submit button.
      ignite video upload2
    2. After pressing the submit button, you can scroll down to the bottom of the page and see your video uploaded into Ignite Gallery.
      Ignite Gallery: video upload
    3. You can click on the title of the new entry to make edits from here. You will see that Joomla automatically selects the thumbnail from the YouTube video. If you would like to change the thumbnail you can upload your own image. You can change how the image is cropped among other things.
      Editing video properties in Ignite Gallery

    Previous steps:

    Next step:

  • Adding Videos to Ignite Gallery - Youtube/Vimeo (Joomla! 4)

    • How to video:

    Overview

    There is now an easier way to upload YouTube videos and thumbnails onto your Joomla site!  Please note, this will not work with Kaltura Videos

    Recommended: Your video should be uploaded to the Rutgers YouTube Channel before proceeding.

     Also review more details about videos with SAS: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/699-video-hosting-options-at-rutgers

    Procedure

    1. In the file upload menu of Ignite Gallery now there is a field to upload a YouTube/Vimeo URL instead of uploading a file directly.Once you have typed in your URL press the submit button.
      ig video
    2. After pressing the submit button, you can scroll down to the bottom of the page and see your video uploaded into Ignite Gallery.
      ig video1
    3. You can click on the title of the new entry to make edits from here. You will see that Joomla automatically selects the thumbnail from the YouTube video. If you would like to change the thumbnail you can upload your own image. You can change how the image is cropped among other things.
      ig video2

    Previous steps:

    Next step:

    • Video Included: Video Included
  • Adding Videos to Ignite Gallery (Kaltura)

    Recommended: Your video should be uploaded to the Rutgers YouTube Channel before proceeding.

    Also review more details about videos with SAS: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/699-video-hosting-options-at-rutgers

    1. Take a screen shot of the video to be added to the gallery, and crop it to display a still image from the video.  This will be used as the thumbnail for the video.
    2. Upload the image into the gallery.
    3. Click on Edit for the thumbnail image that you uploaded into the gallery:

      Ignite Gallery: Click on Edit for the thumbnail image that you uploaded into the gallery
    4. Go to where the video is hosted, and copy the URL of the video:

      Ignite Gallery: Copy the URL of the video
    5. Paste the URL for the video into the media code:

      Ignite Gallery: Paste URL of video into the media code

    6. Click Save & Close.
    7. You can now see the image as a thumbnail with the rest of the images: 

      Ignite Gallery: Video image appears in gallery as thumbnail

    8. When you click on it, you will be taken to the lightbox, and you can play the video:

      Ignite Gallery: Video plays in lightbox


    Previous steps:

    Next step:

  • Adding Videos to Ignite Gallery (Kaltura) (Joomla! 4)

    • How to video:

    Recommended: Your video should be uploaded to the Rutgers YouTube Channel before proceeding.

    Also review more details about videos with SAS: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/699-video-hosting-options-at-rutgers

    1. Take a screen shot of the video to be added to the gallery, and crop it to display a still image from the video.  This will be used as the thumbnail for the video.
    2. Upload the image into the gallery.
    3. Click on Edit for the thumbnail image that you uploaded into the gallery:

      ig kaltura 0
    4. Go to where the video is hosted, and copy the URL of the video:

      Ignite Gallery: Copy the URL of the video
    5. Paste the URL for the video into the media code:

      ig kaltura

    6. Click Save & Close.
    7. You can now see the image as a thumbnail with the rest of the images: 

      Ignite Gallery: Video image appears in gallery as thumbnail

    8. When you click on it, you will be taken to the lightbox, and you can play the video:

      Ignite Gallery: Video plays in lightbox


    Previous steps:

    Next step:

    • Video Included: Video Included
  • Changing Ordering Options for DOCman Menu Items and Modules

    Menu Item

    To reorder DOCman documents displayed by a menu item:

    1. Log into the back-end Administrator interface.
    2. Go to Menus.
    3. Click the name of the menu containing the menu item that links to DOCman.
    4. Open the menu item that matches the page to be edited.  This should be similar to the name of item in the horizontal navigation bar.
    5. Click the DOCman tab (see #1 below).
    6. In the "Sort documents by" dropdown, choose method to sort documents.(see #2 below).
    7. Click Save & Close (see #3 below).

    Select sort criteria for DOCman menu item

    Module

    To reorder DOCman documents displayed by a module:

    1. Log into the back-end Administrator interface.
    2. Go to Extension -> Modules.
    3. Click Search Tools.
    4. In the Select Type dropdown, choose "DocMan - Documents". 
    5. Click the title of the module to be adjusted.
    6. The screen that shows should have an "Order by" field (see #1 below).
    7. Select a new ordering option.  "Ordering" is the order they appear in the DocMan component which is the same place you upload files and create DocMan documents (see #2 below).
    8. Click Save & Close(see #3 below).

    Select sort criteria for DOCman module

    If you cannot find the Menu Item or Module, submit an SASIT workorder.

  • Changing Ordering Options for DOCman Menu Items and Modules (Joomla 4)

    Menu Item

    To reorder DOCman documents displayed by a menu item:

    1. Log into the back-end Administrator interface.
    2. Go to Menus.
    3. Click the name of the menu containing the menu item that links to DOCman.
    4. Open the menu item that matches the page to be edited.  This should be similar to the name of item in the horizontal navigation bar.
    5. Click the DOCman tab (see #1 below).
    6. In the "Sort documents by" dropdown, choose method to sort documents.(see #2 below).
    7. Click Save & Close (see #3 below).

    Select sort criteria for DOCman menu item

    Module

    To reorder DOCman documents displayed by a module:

    1. Log into the back-end Administrator interface.
    2. Go to Extension -> Modules.
    3. Click Search Tools.
    4. In the Select Type dropdown, choose "DocMan - Documents". 
    5. Click the title of the module to be adjusted.
    6. The screen that shows should have an "Order by" field (see #1 below).
    7. Select a new ordering option.  "Ordering" is the order they appear in the DocMan component which is the same place you upload files and create DocMan documents (see #2 below).
    8. Click Save & Close(see #3 below).

    Select sort criteria for DOCman module

    If you cannot find the Menu Item or Module, submit an SASIT REQUEST.

  • Chronoforms: Adding a CAPTCHA to a Form

    This procedure describes how to add a security CAPTCHA to a form using ChronoForms version 5.  


    Getting Started: Select the form

    • Log into the Joomla! administrator page for your web site
    • Click on Components > ChronoForms5:

      Components > Chronoforms5
    • Ignore the message "Your ChronoForms installation on webdevel.sas.rutgers.edu is NOT validated."  Chronoforms will still work.
    • In Forms Manager, click on the name of the form you want to add a CAPTCHA to.
    • Click on the Designer tab (see #1 below).

    Add the CAPTCHA

    • Drag the Captcha button under Basic (see #2 below) to the light blue designer area under Widgets (see #3 below):


    Chronoforms Form Designer: Drag Captcha Button to Designer area

    • Click and hold the Drag button for the Captcha element so that it appears above the "Submit" button element (see #1 below):


    Chronoforms Captcha element: Drag and Edit buttons

    • Click the Edit button for the Captcha element (see #2 above).
      • Click the Validationtab (see #1 below)
      • Change Required to "Yes" (see #2 below)
      • Click Save and Close to the lower right (see #3 below):


    Chronoforms Captcha: Edit Element Settings

    • Click on the Setuptab (see #1 below).
      • Click Captcha (see #2 below).
      • Change Enabled to "Yes" (see #3 below).
      • (Optional) Modify the message in the Error field (see #4 below).
      • Click Save and Close to the upper right (see #5 below):

     Chronoforms Captcha: Edit element setup

     

    What's next?

    If you haven't already, you can configure your form to email the data to one or more people

    You can also configure your form to save information to a database.

    Once you configure your form to collect data, you can embed it within an article.

  • Chronoforms: Configuring a form to send email

    This procedure describes how to set up a simple form using mostly text fields using ChronoForms version 5.


    Getting Started: Select a form

    • Log into the Joomla! administrator page for your web site
    • Click on Components > ChronoForms5:

      Components > ChronoForms5
    • Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated."  Chronoforms will still work.
    • In the Forms Manager, click the name of the form you would like to enable email for:

      Chronoforms: Form selection
    • Click on the Designer tab (see #1 below).
    • Take note of the Field Names of the form fields that are used to collect the submitter's name and email address. The Field Name is shown in the upper left corner of the field in a blue box (see #2 below).  You may have separate fields collecting "First Name" and "Last Name" - if so, take note of both field names.
    • Click on the Setup tab (see #3 below).

      Chronoforms: Get Field Names

    • Click the Email (0) option on the green action selector bar (see #1 below).
    • Under Basic options, enter "email" for Action Label (see #2 below).
    • Change the Enabled dropdown selection to "Yes" (see #3 below).
    • For To enter a list of email address (separated by commas) that will receive the data entered into the form (see #4 below).
    • For Subject enter a subject for the email that will be sent when the form is complete (see #5 below).
    • Change Template Generationto "Auto" (otherwise, you will need to manually configure the template for outgoing emails every time you edit the form).
    • Click the Advanced tab above the list of Basic options (see #6 below).

      Chronoforms: Basic email options

    • Under the Advanced options, enter the field name containing the submitter's email address in the Dynamic Tofield (see #1 below). This will send a copy of the email to the person submitting to the form.
    • Enter the field name or names containing the submitter's name in the Dynamic from name field (see #2 below).  For example, if the form asks the submitter to enter their full name in a field called "name", enter "name" here.  If the form asks the submitter to enter the first name and last name in separate fields called "firstname" and "lastname", enter "firstname lastname" here.
    • Enter the field name containing the submitter's email address in the Dynamic from email field (see #3 below):

      Chronoforms: Email advanced options

    • Click the Thanks Message (4) option on the green action selector bar (see #1 below).
    • Enter a message in the Message Content text box (see #2 below).  This message will be displayed when someone submits the form.


    Chronoforms: Thanks Message

    Publishing your form

    If you haven't already published your form, please do the following:

    • Click the General button to the upper left of the form (see #1 below).
    • Change the Enabled dropdown selection to "Yes" (see #2 below):

    Chronoforms: Publish Form

     

    Saving your form

    Click "Save and Close" to the upper right: Chronoforms 5: Save and Close button

    What's next?

    If needed, you can configure your form to save information to a database.

    You can also embed your form within an article.

  • Chronoforms: Create a new table for an existing form

    This procedure describes how to save the data from a form you have updated to a new database table, using ChronoForms version 5.  This step is necessary if you add new fields to a form that saves its data to a table.  A new table needs to be created in order to capture data entered into the new fields.


    Backup the old data table

    • Log into the Joomla! administrator page for your web site.
    • Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated."  Chronoforms will still work.
    • In Forms Manager, find the form and select the existing table from the dropdown menu for Connected Tables
    • Click Backup tableto export the entire form to a CSV file.
    • Save that file and open it to verify that all the data has been saved.
    • Click Cancel to return to Forms Manager.

    Creating a new data table

    • Back in the Forms Manager, check the box to the left of the form that you would like to configure to save data.
    • Click the Create table button at the top.
    • At the Create table page, replace the "#__" portion of the Table Name with the actual database table prefix for your web site (e.g. j17_ or j25_).
    • (Optional) Clear the check boxes for any fields that you do not need to save into the database (for example, "captcha"). Do not unselect the "cf_id" field since it is the primary key!
    • Click Save to the upper right. 

    Modify the form to save data to the new table

    • In Forms Manager, click on the name of the form with the new table.
    • Click the Setup tab.
    • Click Data Save (11).
    • Verify that "Enabled" = "Yes"
    • For "Table name" select the newly created table.
    • Click Save.
    • (Optional) Click the DB Viewer tab at the top and enter field names. They will be added as columns to the table's list view for this form. Without doing this, the table list preview will only show an ID number and the "Created Date/Time". Doing this makes the list show useful information.
    • The format to use here is (one entry per line): field_name=whatever column heading you want. The field name comes from the field settings. It should not contain any spaces or special characters. The column heading can be different.
    • Click Save and Close.

     

  • Chronoforms: Embedding a Form within an Article

    This procedure describes how to embed a form within a Joomla! article using ChronoForms version 5.

    The Chronoforms5 plugin must be installed and enabled on the website in order for this functionality to work.

    Also, "Force HTTPS?" must be set to "Entire Site" in the Global Configuration for the website.  Do not collect data if HTTPS is not being enforced for the entire website.


    Getting Started: Get the form name

    • Log into the Joomla! administrator page for your web site
    • Click on Components > ChronoForms5:

      Components > ChronoForms5
    • Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated."  Chronoforms will still work.
    • In the Forms Manager, take note of the exact name of the form as it appears in the Form Name column.  The Form Name will appear above any Form description that may exist for the form.  The Form Name will appear as a link and will not have any spaces or special characters other than dashes or underscores. In the below example, the Form Name is "new-form-cf5" while the Form description is "New Chronoforms V5 Form."

      ChronoForms5: Form Name (appears above the optional "Form Description")
    • Select an article to edit following steps 1-3 of Editing Articles or create a new article.
    • Enter the following code within your article in the place where the forms should appear:

      { chronoforms5 }[form-name]{ /chronoforms5 }

      Do not type the spaces before or after the braces.  Replace [form-name] with the actual Form Name.  Your text box should then look like this:

      ChronoForms5: Embed a form within an article
    • If you are editing the article from the front end of the web site, click the Save button to the upper left to save your changes and close the article.
    • If you are working in the Joomla! Administrator, to save your changes and continue editing the article, click the Save button to the upper left: Save button
    • If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left: Save & Close button
    • Your form will now appear within your article.
  • Chronoforms: Saving Data from a Form to a Data Table

    This procedure describes how to save data from a form to a database table, using ChronoForms version 5.


    Creating the data table

    • Log into the Joomla! administrator page for your web site
    • First, look up the Database Tables Prefix for your web site.  This can be found in "System > Global Configuration" on the Server tab.
    • Click on Components > ChronoForms5:

      Components: ChronoForms5
    • Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated."  Chronoforms will still work.
    • In Forms Manager, check the box to the left of the form that you would like to configure to save data (see #1 below).
    • Click the Create table button at the top (see #2 below).
      Chronoforms5: Create table
    • At the Create table page, replace the "#__" portion of the Table Name with the actual database table prefix for your web site (e.g. j17_ or j25_) See #1 below.
    • (Optional) Clear the check boxes for any fields that you do not need to save into the database (for example, the "captcha" and Submit "button" fields). Do not unselect the "cf_id" field since it is the primary key!  See #2 below.
    • Click Save to the upper right (see #3 below).

    ChronoForms5: Creating a table

    Modify the form to save data to the new table

    • In Forms Manager, click on the name of the form with the new table.
    • Click the Setup button (see #1 below).
    • Click the Data Save (11) link (see #2 below).
    • Change Enabled to "Yes" (see #3 below).
    • Select the newly created table name from the Table name dropdown menu (see #4 below).
    • Click Save and Close (see #5 below).

    ChronoForms5: Saving data to table

    Viewing the data

    One the table contains some data from one or more form submissions, you can view it as follows:

    • In Forms Manager, click the dropdown arrow in the Connected Tables column corresponding to the form with the new table (see #1 below).
    • Select the new table from the dropdown menu (see #2 below).

    ChronoForms5: Select form data table

    • At the Data listing page, click the check box for any data record you would like to view (see #1 below).
    • Click the View Recordbutton to view the data in Joomla! (see #2 below).
    • Click Backup table to export the entire form to a CSV file (see #3 below).
    • Click Backup records to export only the selected records to a CSV file (see #4 below).
    • Click Cancel when done viewing or backing up records (see #5 below).

     


    ChronoForms5: Data listing

  • Chronoforms: Simple Form Setup

    This procedure describes how to set up a simple form using mostly text fields using ChronoForms version 5.


    Getting Started: Creating a new form

    • Log into the Joomla! administrator page for your web site
    • Click on Components > ChronoForms5:

      Components: ChronoForms5

    • Ignore the message "Your ChronoForms installation onwebdevel.sas.rutgers.edu is NOT validated."  Chronoforms will still work.
    • Click the New Simple button at the top: ChronoForms: New Simple button
    • For Form name, enter a short name for your form (see #1 below).  The form name should not have any spaces or special characters (other than dashes and underscores).
    • For Form description, enter a description of your form. Spaces and special characters are allowed (see #2 below). Important: although this field looks optional, it is necessary to complete it; otherwise, the form may not work.
    • Change Published to "No"; it will be published later (see #3 below).
    • Click Save to the upper right (see #4 below).

     Chronoforms: New Form, "General" tab

    Adding form fields for text

    • Click on the Designer tab (see #5 above).
    • For each field in your form, drag one of the long blue buttons under Basic (see #1 below) to the light blue designer area under Widgets (see #2 below). 
      • Drag the Text Box button for a short text field (such as First Name, Last Name, Phone Number, or Email Address) - see #3 below.
      • Drag the TextArea Box for a longer field, such as a personal statement or comments field (see #4 below).

    Chronoforms: Simple Form Designer ("Designer" tab)

    • After you drag the buttons to the blue area, click the blue Edit button (see #5 above) for each field and modify the values as follows:
      • Field Name = This should be unique and have no spaces (see #1 below).
      • Label = Enter the name of the field as it should appear on the form itself.  For example, "Last Name" for last name (see #2 below).
      • Sub Label = This is optional.  You can add instructions here, or just leave it blank (see #3 below).


    Chronoforms: Edit Element Settings

    • If you want the form field to be required, or to follow a special format, click the Validationtab (see #4 above). Some of the commonly used options are:
      • Required = change to "Yes" if the field is required (see #1 below).
      • Email = change to "Yes" for an email field (see #2 below).
      • Phone = change to "Yes" for a phone field.
      • Int. phone = change to "Yes" for an international phone field.
    • When done editing the field, click Save and Close to the lower right (see #3 below):


    Chronoforms: Edit Element Settings - Validation

    • After adding each field, click Save to the upper right to save your work on the form: Chronoforms 5: Save button

    Creating a checkbox with multiple options

    • Drag Checkbox Group from the Basic area to the light blue designer area below Widgets(see #1 below).
    • Click Edit for the new Checkbox Group field (see #2 below):


    Chronoforms: Checkbox Group

    • Modify the options in the Edit element settings popup window as needed:
      • Field Name = This should be unique and have no spaces (see #1 below).
      • Options: This is where the checkbox options are set (see #2 below).
        • The value before the "=" should be short; for example, just the course number of a course
        • The value after the "=" can be longer; for example, the full name of the course
        • You can create a many options for the checkbox as needed; start each option on a new line
      • Label: Enter the name of the field as it should appear on the form itself.
    • When done editing the field, click Save and Close to the lower right (see #3 below).


    Chronoforms: Checkbox Group - Edit element settings

    Manipulating your form fields

    You can copy, move, or delete form fields as follows:

    • To copy an existing field to create a new field, click the Copy button for that field (see #1 below), then click the Paste button above and to the right of the list of fields (see #2 below).
    • To move a field, click and hold the Drag button for that field, move the field to the location in the light blue designer area where it should appear, and release the mouse button (see #3 below).
    • To delete a field, click the field's Delete button (see #4 below):

    Chronoforms: Manipulating your form fields 

    Adding a "Submit" button

    The last field in your form should be a Submit button:

    • Click and drag the Submit Button blue bar (see #1 below) from the Basic area to the light blue designer area under Widgets.
    • The Submit button should appear as the last field in the designer area (see #2 below):

    Chronoforms: Adding a "Submit" button

     

    Publishing your form

    If you are ready to publish your form, please do the following:

    • Click the General button to the upper left of the form (see #1 below).
    • Change the Enabled dropdown selection to "Yes" (see #2 below):

    Chronoforms: Publish Form

    Saving your form

    When you are done adding all your fields, click "Save and Close" to the upper right: Chronoforms 5: Save and Close button

    What's next?

    To prevent your form from being used by spambots, you should add a CAPTCHA to the form.

    Then, you can configure your form to email the data to one or more people.

    You can also configure your form to save information to a database.

    Once you configure your form to email and/or save data, you can embed it within an article.

  • Creating a "DOCman - Documents" module

    Overview

    You can display a list of documents from the same category within a "DOCman - Documents" module. When new documents are added to the category, the module will automatically update the list.

    Procedure

    1. In the Joomla! back-end (Control Panel), navigate to Extensions > Modules, then click the New Button to create a new module:
      Creating a new module
    2. Select DOCMan - Documents from the list that appears under "Select a Module Type:"
      Select a module type: "DOCman - Documents"
    3. Enter a Title for your module (see #1 below).
    4. Click within the Categories field and select your DOCMan category (see #2 below).
    5. For "Position," click the dropdown menu, and select the desired module position.  For example, to display the module to the right of the content area, select "Sidebar-b [sidebar-b]". Read more about Module Positions here.
    6. Click the "Menu Assignment" menu to specify which menu items will display your module (see #3 below).
    7. Click Save & Close to the upper left (see #4 below).

    Creating a "DOCMan -Documents" Module

     

  • Creating a "DOCman - Documents" module (Joomla! 4)

    Overview

    You can display a list of documents from the same category within a "DOCman - Documents" module. When new documents are added to the category, the module will automatically update the list.

    Procedure

    1. In the Joomla! back-end (Control Panel), navigate to Extensions > Modules, then click the New Button to create a new module:
      Screenshot 2023 06 20 at 12.29.33 PM
    2. Select DOCMan - Documents from the list that appears under "Select a Module Type:"
      Screenshot 2023 06 20 at 12.31.30 PM
    3. Enter a Title for your module (see #1 below).
    4. Click within the Categories field and select your DOCMan category (see #2 below).
    5. For "Position," click the dropdown menu, and select the desired module position.  For example, to display the module to the right of the content area, select "Sidebar-b [sidebar-b]". Read more about Module Positions here.
    6. Click the "Menu Assignment" menu to specify which menu items will display your module (see #3 below).
    7. Click Save & Close to the upper left (see #4 below).

    Screenshot 2023 06 20 at 12.41.16 PM