Now that we've got a management page together for our authors, it's time to create one for our articles. We've covered most of the basic how-to's in the author sections. This section will move more quickly, assuming that you've worked through and understood the previous lessons.

Creating the Article Entry Form

1. From the Control Panel, create a new form, making sure to tick the Use Form Builder checkbox.
2. Your form settings should look like this. Be sure to select all the Fields except Created, Updated, and Active and click the Auto-Create Form button:
   
   
   Why are we ignoring the Created, Updated, and Active columns?  Those are for features we will add later.

Modifying the Form

Right now the form would be functional, but it doesn't quit fit our needs. For instance, the Auto-Create Form functionality generated a TextBox for the AuthorId column. We don't want our writers to have to remember some numeric ID and enter it into a text box. It would be a much better user experience to allow them to select a name from a list. The same principal applies to the Published control. Right now it's a TextBox, but it would be easier if a user could simply pick the date from a popup. This is what we'll be covering next.

Adding a Dropdown List of Authors

1. Add a ControlDataSource control to the form. As its name implies, it provides data to controls. This is what will handle fetching the list of authors from the database.
   
2. Your settings should look the same as mine, below.  The ID dsAuthors will be used when we hook up the drop-down listbox later. The other settings should be pretty self-explanatory. We're choosing the XMP_ArticleAuthors table as our source. This is the table we worked with in the previous lessons that stores our authors.  From that table, we're only returning the columns we need - the AuthorId and the author's Name. We've also chosen to sort those results in ascending order based on the author's name. Once you're done, click the Apply button.
   
3. Once you've saved the ControlDataSource, scroll down to the end of the form's canvas. You should see the control there. ControlDataSource controls aren't visible at run-time so it's position on the form is irrelevant. However, the Form Builder adds it to the form canvas so you can easily edit it later. 
   
4. Now that we have our Authors being retrieved, we need to link it to a drop-down list control.  First, scroll up to the top of the form canvas and delete the AuthorId control.
   
5. Now, add a Dropdown List control to the canvas
   
6. The settings for the new drop-down list are below, but there's a lot going on, so it bears an explanation. We've given the control an ID of AuthorId, a Label (caption) of Author, and have selected the AuthorId column as the Data Field. Previously, the Form Builder, had automatically done this for us. Now that we're manually adding a control, it's important that these values are set -- especially the Data Field, as this is what binds the control to the database. 
   
   Next, for Control Data Source, select the dsAuthors data source we just created. Remember dsAuthors was the ID we assigned to the control.  Once you select the Control Data Source, you'll be presented with several other options. First, you need to select which column will be displayed to the user -- the Data Text Field, and which column will be the hidden value for each item -- the Data Value Field. IMPORTANT: Only the Data Value Field will be stored with the Article as the AuthorId.  The Data Text Field will not.  So, we choose Name for the Data Text Field and AuthorId for the Data Value Field.  
   
   Optionally, I've chosen to require the user to select an author. I also wanted to show you a little about adding hard-coded items to a list box.  Since we're also populating this control with data, we need to tick the Append Databound Items box. This will add the list items it gets from the database to whatever values we hard-code into the list.
   
   Now, we're only going to specify one item - a "Select One" item to instruct the user they need to select an author. To do this, click the "+" button in the Items section of the designer.  You'll then be prompted to enter the display Text and the hidden Value of the item. Once you've filled in the fields, click the Save button to save it to the list. When you're done, you can click the Hide button. For our control, we're only adding some Text. We have deliberately left the Value blank. This is important as it will allow us to easily validate the control has been filled out.  That's our next step.
   
7. Click the Validation tab on the designer and add a Required validator to this control as shown below. Don't forget to click the Save button 
   
8. Finally click the Apply button to add the control to the form canvas. 
   
9. As with all controls, it is added to the end of the controls on the canvas. Practice your drag-n-drop re-ordering skills to place it just underneath the Title control.
   
10. While we're in the neighborhood, let's go ahead and make the article Title required too. Do you remember how to do that?  Hover over the title control and select the pencil icon to edit it. Then add a Required validator with the settings below. Remember to click the Save button to create the validator and attach it to the control. Then you can click the Apply button to save the control back to the canvas.
    
11. One more tweak I'd like to make is to shrink the height of the Synopsis TextArea. Edit that control and set it's height to 80. 
    

Adding a Date Picker for the Published Date

Next up, we're going to swap out the Publshed text box control with a DateInput control - complete with date picker. Ready? Go!

1. Delete the Published control from the canvas. You should find it sandwiched between the Body and the Validation Summary controls.
   
2. Add a DateInput control to the canvas
   
3. As with other controls, enter an ID (Published), a Label (Publish Date), and be sure to assing the Data Field (Published).  Next, tick the Date Picker box. This will hook up a pop-up calendar to your control to aid the user in picking a date. The DateInput control enables you to accept date values or date and time values. For our purposes, we're only concerned with the date component so we tick the Date Only checkbox.
   
4. Next, let's add a new type of validation. We want to make sure the date entered by the user is a valid date value. NOTE: That doesn't mean it's in the format you want or that it's even the correct date. We're validating that the value entered can be converted to a date value.  Select the Validation tab and add a new Validator. Choose the Compare validation. What we'll be doing is a Data Type check, so select Date for Data Type and Data Type Check for Comparison Type. Remember to click the Save button when your done. Then click the Apply button to save your changes to the canvas.
   
5. The new control is added to the end of the canvas, so drag it up between the Body and Validation Summary.
   
6. Finally, click the Create Form button and you'll be taken back to the Manage Forms grid where you can see your new form listed.

Congratulations - Again!

You've quickly set up an Add and Edit form for your articles. The next step is to create a template to display them with.