Commenting in Widgets

From KickApps Documentation

Contents 1 Add in-widget commenting to an existing video player using the Video Player with Comments Template 2 Add in-widget commenting using Events & Actions 2.1 Show comments on an item in a media player 2.2 Show comments on a page 2.3 Let users add comments to items in a media player 2.4 Let users add comments to a webpage 3 Sample in-widget Commenting Template

Add in-widget commenting to an existing video player using the Video Player with Comments Template

1. In the App Studio, open your existing video player widget.
2. Drag the Video Player with Comments Template onto the stage from the Templates panel on the left side of the App Studio.
3. Drag the Deck and Comments Button components from the template wherever you'd like them to appear over your video player.
4. Now you'll need to re-wire the commenting Events and Actions so that they use your video player instead of the one in the Template.
5. Click on an empty part of the stage to select the App Container.
6. Open the Actions window by selecting Actions from the Window menu.
7. Double-click on the Action entry called "Log in user success: App Container: Add comment to selected media".
8. In the Edit Action window, select the name of your video player from the "In media component" dropdown.
9. Now double-click into the Deck component.
10. Click on the "Submit Your Comment" button.
11. In the Actions panel, double-click on the Action called "Click: App Container: Add comment to selected media".
12. In the Edit Action window, select the name of your video player from the "In media component" dropdown.
13. Back in the Actions panel, click "Comment post timer" form the "Components with Actions" list on the left.
14. Double-click on the Action called "Timer: App Container: LIst comments for selected media".
15. In the Edit Action window, select the name of your video player from the "In media component" dropdown.
16. Back in the Actions panel again, click "Text Input" in the "Components with Actions" list on the left.
17. Double-click on the Action called "Keyboard enter: App Container: Add comment to selected media".
18. In the Edit Action window, select the name of your video player from the "In media component" dropdown.
19. Click your video player component.
20. In the Actions Panel, add an Action to your video player. The Event will be "Media change". The Action will be "List comments for selected media". Select your video player from the "In media component dropdown, and the custom list from the Video Player with Comments template, called "Comments Custom List", from the "Into this Custom List" dropdown.
21. Delete the Video Player component from the Video Player with Comments template.

Your video player is now equipped for in-widget commenting.

Add in-widget commenting using Events & Actions

You can roll your own in-widget commenting solution using the Events & Actions for commenting in conjunction with those for logging users into your site.

Show comments on an item in a media player

1. Add a Custom List component to the stage by dragging the Custom List component from the Components panel on the left onto the stage, or by dragging the Custom List Template from the Templates panel on the left onto the stage.
2. Drag a media player to the stage. Media players include the All-in-one Video Player, the Video component, the 3d Carousel, 3d Gallery, Audio Player, and Slideshow, all of which can be found in the Components and Templates panels on the left side of the App Studio.
3. Select your media player.
4. Open the Actions window by selecting Actions from the Window menu.
5. Add a new Action. The Event will be "Media Change". The Action will be "List comments for selected media". You'll need to specify which component's media items you'd like to show comments for, and which list component you'd like to show them in.</br>

The content of your list component will now be set to a feed of comments for the current item in your media player. When the current item in the media player changes (if your media player advances to the next item in its feed, or the user clicks ahead in a playlist), your list component will be updated with comments for the new item in the media player. You'll need to drill into the Custom List component by double-clicking it, and either add text and image components to it to display the contents of the comment feed, or, if you used the Custom List Template, you'll need to change the content for the text and image components within it to the nodes in the Comment feed that you'd like to display. See the Custom List doc for details on assigning content to components within the Custom List.

Show comments on a page

1. Add a Custom List component to the stage by dragging the Custom List component from the Components panel on the left onto the stage, or by dragging the Custom List Template from the Templates panel on the left onto the stage.
2. Select your list component.
3. Open the Actions window by selecting Actions from the Window menu.
4. Add a new Action. The Event will be "Child components loaded". The Action will be "List comments for current page". Select your list component from the "Into this Custom List" dropdown.

The content of your list component will now be set to a feed of comments that have been made on the webpage on which the widget is embedded.

Let users add comments to items in a media player

1. Drag a media player to the stage. Media players include the All-in-one Video Player, the Video component, the 3d Carousel, 3d Gallery, Audio Player, and Slideshow, all of which can be found in the Components and Templates panels on the left side of the App Studio.
2. Drag a Text Input component, and a Button component onto the stage. Users will enter their comment into the Text Input component, and submit their comment by clicking the Button.
   
3. Select the Button component.
4. Open the Actions window by selecting Actions from the Window menu.
5. Add a new Action. The Event will be "Click". The Action will be "Add comment to selected media". Select your media player from the "In media component" dropdown. Select your Text Input component from the "From this Text Input" dropdown.</br>
6. Now when users type a comment into your Text Input and click the Submit button, the widget will send the contents of the Text Input component in to KickApps as a comment on the current item in your media player. We need to complete one more step, though, because only authenticated users can submit comments. To ensure that the user submitting the comment is logged in, we will add an Event that checks whether the user is logged in before submitting their comment. If the user isn't logged in, we'll show them a log in form. First, we need to build that form.
7. Drag two Text Input components onto the stage and a Button component. The Text Input components will be used to let the user enter their username and password. The button will submit this "form" to KickApps' authentication API. I added a few Text Components and a Rectangle component to mine to fill it out a bit, but these aren't necessary.
   
8. Select your Sign in Button component, then add a new Action in the Actions window. The Event will be "Click". The Action will be "Log in user". Select the Text Input components you'll be using to capture the user's username and password from the dropdowns.
9. Now we're going to group the components that comprise your log in form. To do so, select all of them, right-click on the aggregate selection, then select "Group in new Container". This will come in handy when we need to show and hide this form.
10. Since we're only going to show this log in form when the user needs to log in, we need to keep it hidden by default. To do so, click the eye icon next to your Container's entry in the Layers panel, which is located at the bottom of the leftmost column of the App Studio.
11. Now we need to make sure we catch and correct for the situation in which a user attempts to add a comment without being logged in to your site. To do so, click an empty area of the stage, and add another Action to the App Container. The Event will be "Comment post failure - not logged in". The Action will be "Show/Hide". The component to be hidden will be the Container you just made to wrap the components in your log in form, and the Value will be Show. This will show your log in form to users who try to submit comments without being logged in.
12. Now we need to handle hiding the log in form and submitting the user's comment once they've logged in successfully. To do so, add another Action to the App Container. The Event will be "Log in user - success". The Action will be "Show/Hide". The component to be hidden will again be the Container that wraps the components in your log-in form. The Value will be Hide.
13. Add another new Action to the App Container. The Event will again be "Log in user - success". The Action will now be "Add comment to selected media".
    
14. (Optional) If you've also set up a Custom List to show comments made on the current item in your media player (see directions above), you'll probably want to show the comment that a user has just entered in that Custom List as well. To do so,
    1. Add another new Action on the App Container. The Event will be "Log in user - success". The Action will be "List comments for selected media". Select your media player from the "In media player" dropdown, and select the Custom List you're using to show comments from the "Into this Custom List" dropdown.
    2. Select the Button component you're using to submit comments and add a new Action to it. The Event will be "Click". The Action will be "List comments for selected media". Select your media player from the "In media player" dropdown, and select the Custom List you're using to show comments from the "Into this Custom List" dropdown.

You now have a media player widget with built-in commenting.

Let users add comments to a webpage

1. Drag a Text Input component, and a Button component onto the stage. Users will enter their comment into the Text Input component, and submit their comment by clicking the Button.
   
2. Select the Button component.
3. Open the Actions window by selecting Actions from the Window menu.
4. Add a new Action. The Event will be "Click". The Action will be "Add comment to current page". Select your Text Input component from the "From this Text Input" dropdown.
5. Now when users type a comment into your Text Input and click the Submit button, the widget will send the contents of the Text Input component in to KickApps as a comment on the web page on which the widget is embedded. When a KickApps server receives this request, it will check to see whether it has a record of the current page. If it does, it will just add the new comment to the list of comments that it has saved for that page. If it doesn't, it will create a new "External URL" media item in your KickApps library, and assign the comment to that External URL item. We need to complete one more step, though, because only authenticated users can submit comments. To ensure that the user submitting the comment is logged in, we will add an Event that checks whether the user is logged in before submitting their comment. If the user isn't logged in, we'll show them a log in form. First, we need to build that form.
6. Drag two Text Input components onto the stage and a Button component. The Text Input components will be used to let the user enter their username and password. The button will submit this "form" to KickApps' authentication API. I added a few Text Components and a Rectangle component to mine to fill it out a bit, but these aren't necessary.
   
7. Select your Sign in Button component, then add a new Action in the Actions window. The Event will be "Click". The Action will be "Log in user". Select the Text Input components you'll be using to capture the user's username and password from the dropdowns.
8. Now we're going to group the components that comprise your log in form. To do so, select all of them, right-click on the aggregate selection, then select "Group in new Container". This will come in handy when we need to show and hide this form.
9. Since we're only going to show this log in form when the user needs to log in, we need to keep it hidden by default. To do so, click the eye icon next to your Container's entry in the Layers panel, which is located at the bottom of the leftmost column of the App Studio.
10. Now we need to make sure we catch and correct for the situation in which a user attempts to add a comment without being logged in to your site. To do so, click an empty area of the stage, and add another Action to the App Container. The Event will be "Comment post failure - not logged in". The Action will be "Show/Hide". The component to be hidden will be the Container you just made to wrap the components in your log in form, and the Value will be Show. This will show your log in form to users who try to submit comments without being logged in.
11. Now we need to handle hiding the log in form and submitting the user's comment once they've logged in successfully. To do so, add another Action to the App Container. The Event will be "Log in user - success". The Action will be "Show/Hide". The component to be hidden will again be the Container that wraps the components in your log-in form. The Value will be Hide.
12. Add another new Action to the App Container. The Event will again be "Log in user - success". The Action will now be "Add comment to current page".
13. (Optional) If you've also set up a Custom List to show comments made on the web page on which your widget is embedded (see directions above), you'll probably want to show the comment that a user has just entered in that Custom List as well. To do so,
    1. Add another new Action on the App Container. The Event will be "Log in user - success". The Action will be "List comments for current page". Select your list component from the "Into this Custom List" dropdown.
    2. Select the Button component you're using to submit comments and add a new Action to it. The Event will be "Click". The Action will be "List comments for current page". Select your list component from the "Into this Custom List" dropdown.

You now have a widget that will add comments to any web page.

Sample in-widget Commenting Template

|