Simple App Feedback Component Documentation

1. Overview

The Simple App Feedback Component is a reusable block/widget designed for easy integration into applications (e.g., OutSystems). It provides end-users with an intuitive interface to submit feedback, including textual comments, an annotated screenshot, and automatically collected device/browser metadata. The collected data is packaged and exposed via an event, intended for submission to the Simple App Feedback Backoffice application.

2. Features

• Feedback Trigger: Floating button to open the feedback interface.
• Repositionable Popup: Draggable/clickable popup with textarea and action buttons.
• Screenshot Capture: Captures the current screen state using html2canvas.
• Annotation Tool: Allows drawing on the screen (mouse & touch support) before capture. Includes clear option.
• Metadata Collection: Automatically gathers context (see Section 5 for details).
• Event-Driven Submission: Triggers an OnFeedbackSubmit event (or similar name) passing the feedback text, image data URL, and the collected metadata object.
• Backend Integration: Designed for the event handler to call the SubmitFeedback Service Action from the Simple App Feedback Backoffice application.
• Validation: Prevents submission of empty feedback comments.

3. How to Use (End-User Perspective)

1. Click the feedback icon.
2. The feedback box appears. Reposition if needed.
3. Type your feedback.
4. (Optional) Click "Draw", annotate the screen, click "Stop Drawing". Use "Clear Drawing" if needed.
5. Click "Send Feedback". Your comment, screenshot, and device details are submitted.
6. Click "Cancel" to close.

4. Integration & Setup (Developer Perspective)

1. Add Component: Drag the Simple App Feedback block/widget onto the desired screen(s) or layout.
2. Implement Handler: Create a new screen/client action to handle the component's OnFeedbackSubmit event. This action will receive input parameters for the Feedback Text (Text), Image Data URL (Text), and Metadata (Structure/Object).
3. Call Service Action:Inside your event handler action:
   • Recommendation: Call a Server Action within your own module.
   • Inside the Server Action, call the SubmitFeedback Service Action provided by the Simple_App_Feedback_Backoffice module.
   • Map the inputs received by the event handler (Text, Image, Metadata) to the corresponding inputs of the SubmitFeedback action.
   • Add the current UserId (using GetUserId()) within the Server Action before calling SubmitFeedback.
4. (Optional) Access Control: Use standard role checks (e.g., CheckRole()) or other logic to conditionally display the feedback component block based on user permissions.
5. Dependencies: Ensure html2canvas JS is available and the Simple_App_Feedback_Backoffice module is referenced.

5. Metadata Captured

The component automatically gathers the following contextual information when feedback is submitted. This data is passed as an object/structure in the OnFeedbackSubmit event, typically named Metadata.

• url: The full URL of the current page (window.location.href).
• screenName: The name of the window (window.name).
• screenResolution: The user's physical screen resolution (e.g., "1920x1080") (window.screen.widthxwindow.screen.height).
• windowResolution: The browser's viewport/window size (e.g., "1440x900") (window.innerWidthxwindow.innerHeight).
• userAgent: The browser's User Agent string, containing browser and OS details (navigator.userAgent).
• platform: The operating system platform (e.g., "Win32", "MacIntel", "Linux armv8l") (navigator.platform).
• language: The browser's preferred language (e.g., "en-US") (navigator.language).
• cookiesEnabled: Boolean indicating if cookies are enabled (navigator.cookieEnabled).
• referrer: The URL of the page that linked to the current page (document.referrer).

(This data is collected internally by the component just before triggering the OnFeedbackSubmit event).

6. Customization

• Styling: Modify CSS for the component block and button classes.
• Trigger Button: Customize appearance if allowed by the component.
• Drawing Style: Modify ctx.strokeStyle, ctx.lineWidth in the component's JS.