Long Popup Content Test

This is the beginning of a deliberately long document used to test popup behaviour. The content is intentionally extended over many sections so that the popup must handle a significant amount of vertical content.

Section 1: Overview

This section contains a large amount of explanatory content. The purpose is to determine whether the popup close button changes position when the content becomes sufficiently long. A normal popup should be able to contain long content while maintaining the expected position of its close control.

The system provides functionality for authentication, data retrieval, data submission, data modification, data deletion, questionnaire management, location management, user management, reporting, and integration with external applications.

When a popup contains many sections of information, the content may extend far beyond the visible height of the browser window. This creates a situation where scrolling becomes necessary. The following sections intentionally reproduce this condition.

Section 2: Authentication

Login

Users must authenticate before accessing protected resources. Authentication is performed by sending credentials to the login endpoint.

{
    "userName": "sample-user",
    "password": "sample-password",
    "instance": "example"
}

Authentication Response

The authentication response contains information required for subsequent requests. Clients must retain the relevant authentication values and include them in future requests where required.

The authentication mechanism is used throughout the remainder of the API. Every protected operation depends on the authentication information obtained during the login process.

Section 3: Questionnaire Management

Fetching Questionnaires

The questionnaire endpoint provides information about forms available to the authenticated user. A questionnaire contains metadata and a collection of questions.

Question Attributes

Section 4: Location Management

The system supports hierarchical location structures. Locations can contain parent and child relationships and may be used when filtering data.

A location hierarchy may contain several levels. Each level can contain multiple locations and each location can contain multiple children. The structure can therefore become very large depending on the amount of geographical information stored in the system.

[
    {
        "key": "21120",
        "title": "Province A",
        "zoom": "0",
        "parent": "-1",
        "level": "0"
    },
    {
        "key": "21121",
        "title": "County 1",
        "zoom": "0",
        "parent": "21120",
        "level": "1"
    },
    {
        "key": "21122",
        "title": "Sub-County 1",
        "zoom": "0",
        "parent": "21121",
        "level": "2"
    }
]

Section 5: User Management

The user endpoint provides information about users associated with the authenticated account. User objects contain identifiers and other information required by applications consuming the API.

Section 6: Fetching Data

The data endpoint is used to retrieve records associated with a questionnaire. The response may contain many records, depending on the amount of information stored for the selected form.

Large datasets may require pagination. The client can request a limited number of records and then use an offset or another pagination mechanism to retrieve subsequent records.

Request Parameters

Example Request

/answer/Form79693315?version=5&limit=1000&offset=1224

Example Response

[
    {
        "id": "91bba030-3eff-4722-91d2-94de7ec0bc93",
        "name": "Example Data",
        "questionnaire_id": "FORM123",
        "user_id": 11,
        "needs_editing": false,
        "modified": 1405588263205,
        "row_id": 3002
    }
]

Section 7: Saving Data

New data can be saved by sending a JSON payload containing the appropriate question identifiers and values. The payload may contain text values, numeric values, selections, location values, coordinates, and other supported fields.

{
    "Coordinates": "4.214943141390651 33.04687500000001",
    "Name": "Sample Write API Test Data",
    "question1": 28,
    "question2": "Option A",
    "location1": 95,
    "location2": 96,
    "location3": 97,
    "location4": 98
}

A successful save operation returns information about the newly created data point. The response may include identifiers that can subsequently be used to update the record.

Successful Response

{
    "status": "OK",
    "message": "Data Saved",
    "_id": "689a45018f61571a0ce5f9e1",
    "id": "cf801983-7d4c-4a06-ade9-01d535ccdd25",
    "dataPoint": {}
}

Section 8: Updating Data

Existing data can be modified by using the unique identifier of the data point. The identifier allows the server to determine which record should be updated.

Applications should retain the unique identifier returned when the data point was originally created. This identifier can then be supplied when performing an update operation.

{
    "Name": "Updated Sample Data",
    "question1": 32,
    "question2": "Option B"
}

Section 9: Deleting Data

Data can be deleted by supplying the identifiers of the records that should be removed. Multiple records may be included in a single request.

{
    "arguments": [
        "0d25c826-328f-4fcf-a091-cc43566f04ab",
        "308a0d04-c4d8-4845-81c0-3d05582ecce4",
        "91bba030-3eff-4722-91d2-94de7ec0bc93"
    ]
}

After processing the request, the server returns a response indicating whether the operation was successful.

Section 10: Response Attributes

Section 11: File Attachments

Data points may contain files and images. File objects can contain identifiers, MIME types, sizes, names, and URLs. Applications can use this information to retrieve or display the associated files.

{
    "files": [
        {
            "id": 27,
            "rowId": 3002,
            "questionId": "imageQuestion",
            "mimeType": "image/png",
            "fileSize": 69102,
            "fileName": "example-image.png",
            "url": "https://example.com/file/example-image.png"
        }
    ]
}

Section 12: Filtering

Filtering allows applications to restrict the data returned by the API. Filters can be based on specific fields and values.

Section 13: Sorting

Results can be sorted according to one or more fields. Sorting can be performed in ascending or descending order depending on the requirements of the client.

{
    "sort": {
        "sortdatafield": "modified",
        "sortorder": "desc"
    }
}

Section 14: Pagination

Pagination is useful when an endpoint contains a large number of records. Rather than requesting every record at once, the client can request a limited number of records and then request the next group of records.

For example, a client may request 1,000 records starting from a particular row identifier. After receiving the response, the client can determine the greatest row identifier returned and use that value as the starting point for the next request.

This process can continue until the server returns fewer records than the requested limit or otherwise indicates that there are no additional records available.

Section 15: Error Responses

Section 16: Security

Applications consuming the API should protect authentication information and avoid exposing credentials or session keys to unauthorized parties.

Authentication information should be transmitted only through secure connections. Applications should also validate responses before processing or displaying returned information.

Clients should avoid storing sensitive authentication information in locations where it can be accessed by unauthorized users.

Section 17: Integration

The API can be consumed by external applications that need to retrieve or submit structured data. An integration can authenticate, retrieve questionnaire definitions, retrieve location information, retrieve users, retrieve existing data, submit new data, update existing data, and delete data where permitted.

A typical integration therefore consists of several sequential operations. First, the application authenticates. Second, it retrieves the required metadata. Third, it performs the required data operation. Finally, it processes the response returned by the server.

Section 18: Example Integration Flow

1. Authenticate the application user.
2. Store the authentication information returned by the server.
3. Retrieve the list of available questionnaires.
4. Retrieve the questions associated with the selected questionnaire.
5. Retrieve the relevant location hierarchy.
6. Retrieve user information where required.
7. Retrieve existing data.
8. Process the returned data.
9. Create new records where required.
10. Update existing records where required.
11. Delete records where required.
12. Handle errors and unsuccessful responses.

Section 19: Additional Notes

This is additional long-form content intended specifically to increase the vertical size of the popup. The paragraphs in this section do not introduce any new functionality. They simply ensure that the popup contains enough content to require substantial scrolling.

The popup should continue to behave consistently regardless of the amount of content it contains. Increasing the document height should not change the logical position of controls that are positioned relative to the popup container.

If the popup close button is positioned using absolute positioning, the positioning context is particularly important. If the close button is positioned relative to an ancestor whose dimensions or positioning change because of the content, its location may also change.

Similarly, overflow rules can affect how content is displayed. A popup may have an outer container that controls its position and an inner container that controls scrolling. If those responsibilities are mixed, long content can expose unexpected layout behaviour.

Section 20: Extended Test Content

Lorem ipsum style content is intentionally avoided here so that the document resembles the type of technical documentation being tested. This paragraph contains enough text to occupy multiple lines within a typical popup width. The same pattern is repeated across several paragraphs to increase the total height of the document.

The content continues with additional technical descriptions. A client application may need to retrieve thousands of records, process responses, validate fields, handle errors, and present the resulting information to users. Each operation may require several parameters and may produce different response structures.

When technical documentation contains many endpoints, each endpoint may include a description, HTTP method, URL, request parameters, headers, response codes, example requests, example responses, and attribute descriptions. This naturally creates a long document.

The popup test therefore intentionally reproduces this pattern. The goal is to determine whether the popup’s layout remains stable when presented with a document that is significantly taller than the visible viewport.

Section 21: More Content

More information follows to deliberately increase the height of the popup. This paragraph is part of the test and does not need to be interpreted as actual API documentation.

More information follows to deliberately increase the height of the popup. This paragraph is part of the test and does not need to be interpreted as actual API documentation.

More information follows to deliberately increase the height of the popup. This paragraph is part of the test and does not need to be interpreted as actual API documentation.

More information follows to deliberately increase the height of the popup. This paragraph is part of the test and does not need to be interpreted as actual API documentation.

Section 22: Final Test

If the close button remains at the top-right corner while scrolling through this document, then the popup can handle a very long document without the button moving. If the button moves to the bottom-left or another unexpected position, the issue is being reproduced by content length alone or by the interaction between long content and the popup’s CSS layout.

End of test document.