Precursor

The app must have a login, see this article to create a login

Content forms enable a user to manage app content like news, discussions, and contacts in one place.

Features

A manage content form offers the following features:

  1. Users can save news, discussions, contacts, and more!
  2. App managers can collect information about when users used the app.
  3. Users can manage multiple kinds of content in the app.

Get Started

To create a manage content form you will need to:

  1. Create a new screen called “Manage content”
  2. Change the fields of the form to title, content, date, time, and user field and link it to a ‘discussion’ data source
  3. Apply the ‘getUsername’ JS code to pre-fill the the user field with the user’s username
  4. Hide the username, date, and time fields with CSS so users cannot alter them
  5. Test the form by submitting an entry and checking the data source


Step 1 – Create a new screen called “Manage content”

  1. Click on the blue “Add screens” button.
  2. In the heading, choose the “Popular” option.
  3. Scroll down and select the “Survey-simple form” option.
  4. Click on the blue “Add 1 new screen button”.
  5. Type the title “Manage content”.
  6. Click "Add screen".


Step 2 – Change the fields of the form to title, content, date, time and user field and link it to a ‘discussion’ data source

Note:  If you have specific data that you need to collect, the fields you include in the form will be different than those described here.

  1. Click on the Enter a single line of text here field on the right and change the field label to “Title”. Then choose whether the field should be optional.
  2. Click on the Add multiple lines of text here field on the right and change the field label to “Content”. Then choose whether the field should be optional.
  3. Click on the “Select a date” option and change the field label to “Date”.
  4. Click on the blue “Add fields” button. Scroll down and select the “Time picker” option. Drag and drop in onto the form. 
  5. Change the field label to “Time”. Drag and drop it below the “Date” on the form.
  6. Click on the Enter a valid email field and change the field label to “UserEmail”.
  7. Delete the Rate out of 5, Select an answer, Image upload, and Signature fields by hovering your cursor over them and clicking on the red box in the upper right hand corner of each and then selecting “Delete field”.
  8. Click “Save & Close”.
  9. The form should look like this:


  10. Drag and drop a “Submit” button at the bottom of the form.
  11. Go to the settings tab.
  12. Click the drop down menu under Select a data source to store the form submissions and choose “Create a new data source”.
  13. Name the data source “Discussions”.
  14. Under “Submission”, When the form is submitted, mark the box next to “Add a submission to a data source”.
  15. Choose if you wish to generate an email when the form is submitted.
  16. Under After the form has been submitted choose “Take the user to another screen” and select the “Discussion” screen from the dropdown.
  17. Click “Save and Close”.


Step 3 – Apply the ‘getUsername’ JS code to pre-fill the user field with the user’s username

Note:  If you do not wish for your app to pre-fill the user field with the user’s username, skip this step

  1. On the options toolbar on the far right, click on the option called “Developer Options”. The symbol looks like this: </>
  2. Under “Global” in the JavaScript section, paste the following code:
    function loadUserEmail(formFieldName) {         
    var userEmail;        
    Fliplet.Profile.get('email')        
    .then(function(email) {
    // Gets user email
    userEmail = email;
    console.log('Logged in user email: ', userEmail);
    return;
    })
    .then(function() {
    // Selects form
    if (Fliplet.FormBuilder) {
    return Fliplet.FormBuilder.get();
    }
    throw new Error('No form found for username data.');
    })
    .then(function(form) {
    // set the input value
    form.field(formFieldName).val(userEmail);
    })
    .catch(function(error) {
    console.warn(error);
    });
    }
    
  3. Click the blue “Save and Run” button
  4. Under the “This screen” tab in the Developer options in the Javascript section, paste the following code:
loadUserEmail('UserEmail');


Step 4 – Hide the username, date, and time fields with CSS so users cannot alter them

Note:  If you do not wish to hide fields, skip this step

Hide the username, date, and time fields by pasting the following CSS code into the CSS section under the “This screen” tab:

[data-field="UserEmail"] {
display: none;
}
[data-field="Date"] {
display: none;
}
[data-field="Time"] {
display: none;
}

In order for this code to work, UserEmail, Date, and Time must be field names in the form.

When you view the “Manage content” form, the UserEmail, Date, and Time fields should now be hidden from view. 


Step 5 – Test the form by submitting an entry and checking the data source

  1.  To test this, go to “Preview” mode and login. Type in each of the fields then click the submit button. You should be redirected to the Discussions screen. 
  2. Go back to Edit mode, go to the Manage Content screen and click on the form component. Click on the settings tab, then click on the blue highlighted “edit data source” text.
  3. Check that the values were recorded in the “Edit Data Sources” spreadsheet, including the UserEmail, Date and Time fields.