Skip to content

Commit

Permalink
fix: Broken Links Build Apps (#2813)
Browse files Browse the repository at this point in the history 
## Description 

Provide a concise summary of the changes made in this pull request
- 

## Pull request type

Check the appropriate box:

- [ ] Review Fixes
- [ ] Documentation Overhaul
- [ ] Feature/Story
    - Link one or more Engineering Tickets
        * 
- [ ] A-Force
- [ ] Error in documentation
- [ ] Maintenance

## Documentation tickets

 Link to one or more documentation tickets:
 - 

## Checklist

From the below options, select the ones that are applicable:

- [ ] Checked for Grammarly suggestions.
- [ ] Adhered to the writing checklist.
- [ ] Adhered to the media checklist.
- [ ] Verified and updated cross-references or added redirect rules.
- [ ] Tested the redirect rules on deploy preview.
- [ ] Validated the modifications made to the content on the deploy
preview.
- [ ] Validated the CSS modifications on different screen sizes.
  • Loading branch information
@harshilp24
harshilp24 authored Feb 10, 2025
1 parent dd3cdb4 commit 6d0c36c
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 210 deletions.
229 changes: 27 additions & 202 deletions website/docs/build-apps/how-to-guides/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,295 +2,120 @@
description: This page provides detailed instructions for common tasks in Appsmith, helping you implement specific use cases efficiently.
---

# How-to guides
# How-to Guides

This page provides detailed instructions for common tasks in Appsmith, helping you implement specific use cases efficiently.

Browse through the categorized guides below to find solutions tailored to your requirements.

---

## Data Management
## Display and Filter Data in Table

<div className="containerGridSampleApp">
<!-- Insert Data -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/insert-data">
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/display-search-and-filter-table-data">
<div className="containerHead">
<div className="containerHeading">
<b>Insert Data</b>
<b>Display, Search, and Filter Table Data</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This guide shows you how to insert data into a datasource using the Form widget on a new page and a Modal.
Learn how to display, search, and filter data efficiently in a Table widget.
</div>
</a>
<!-- Update or Delete Data -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/submit-form-data">
<div className="containerHead">
<div className="containerHeading">
<b>Update or Delete Data</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows how to update or delete data using the Form and Modal widgets.
</div>
</a>
</div>

<div className="containerGridSampleApp">
<!-- Search and Filter Table Data -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/search-and-filter-table-data">
<div className="containerHead">
<div className="containerHeading">
<b>Search and Filter Table Data</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to search and filter data in a Table widget based on a search text, date range, or dropdown list option.
</div>
</a>
<!-- Setup Server-Side Pagination on Table -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/Server-side-pagination-in-table">
<div className="containerHead">
<div className="containerHeading">
<b>Setup Server-Side Pagination on Table</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to set up server-side pagination on a Table widget to manage large datasets efficiently.
</div>
</a>
</div>

---

## Form Handling

<div className="containerGridSampleApp">
<!-- Create Forms with Validations -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/create-forms-with-validations">
<div className="containerHead">
<div className="containerHeading">
<b>Create Forms with Validations</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to create forms with validations using the Form widget to ensure user inputs are correct.
</div>
</a>
<!-- Submit Form Data Using API -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/submit-form-data">
<div className="containerHead">
<div className="containerHeading">
<b>Submit Form Data Using API</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page demonstrates how to submit form data to an API using the Form widget.
</div>
</a>
</div>

---

## API Integrations

<div className="containerGridSampleApp">
<!-- Fetch Data from an API -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/fetch-data-from-api">
<div className="containerHead">
<div className="containerHeading">
<b>Fetch Data from an API</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to fetch data from an API using Appsmith's API query capabilities.
</div>
</a>
<!-- Send Data to an API -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/send-data-to-api">
<div className="containerHead">
<div className="containerHeading">
<b>Send Data to an API</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows how to send data from your Appsmith application to an external API using API queries.
</div>
</a>
</div>

---

## UI Customization

<div className="containerGridSampleApp">
<!-- Bind Data to Widgets -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/core-concepts/building-ui/dynamic-ui">
<div className="containerHead">
<div className="containerHeading">
<b>Bind Data to Widgets</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows how you can dynamically update widget properties using queries, JavaScript functions, and setter methods.
</div>
</a>
<!-- Create Data Drilldown View -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/create-drill-down-view">
<div className="containerHead">
<div className="containerHeading">
<b>Create Data Drilldown View</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to build a data drilldown view from a master dataset on a Table or a List widget.
</div>
</a>
</div>

<div className="containerGridSampleApp">
<!-- Setup Table Inline Editing -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/reference/widgets/table/inline-editing">
<div className="containerHead">
<div className="containerHeading">
<b>Setup Table Inline Editing</b>
<b>Create Drill-Down View</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to add and edit Table data through inline editing.
</div>
</a>
<!-- Create a Multi-step Form or Wizard Using Tabs -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/Multi-step-Form-or-Wizard-Using-Tabs">
<div className="containerHead">
<div className="containerHeading">
<b>Create a Multi-step Form or Wizard Using Tabs</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to create a multi-step form using the Tabs widget to collect user input over multiple steps.
Build drill-down views for table data to enhance interactivity.
</div>
</a>
</div>

---

## File Management

<div className="containerGridSampleApp">
<!-- Upload Files Using API -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/Send-Filepicker-Data-with-API-Requests">
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/server-side-pagination-in-table">
<div className="containerHead">
<div className="containerHeading">
<b>Upload Files Using API</b>
<b>Setup Server-Side Pagination</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to use the Filepicker widget to upload file data using an API.
Implement server-side pagination to optimize table performance.
</div>
</a>
<!-- Download Files Using API -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/connect-data/how-to-guides/how-to-download-files-using-api">
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/search-and-filter-table-data">
<div className="containerHead">
<div className="containerHeading">
<b>Download Files Using API</b>
<b>Search and Filter Table Data</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows you how to download a file using an API, with PDF as the file format.
Learn how to apply search and filter logic to table data.
</div>
</a>
</div>

---

## Real-time Integrations
## Display and Filter Data in List

<div className="containerGridSampleApp">
<!-- WebSockets -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/using-websockets">
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/display-search-and-filter-list-data">
<div className="containerHead">
<div className="containerHeading">
<b>Using WebSockets</b>
<b>Display, Search, and Filter List Data</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This guide explains how to implement WebSockets for real-time data exchange in your app.
Learn how to display and filter list data efficiently.
</div>
</a>
<!-- Kafka -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/using-kafka">
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/setup-server-side-pagination-on-list">
<div className="containerHead">
<div className="containerHeading">
<b>Using Kafka</b>
<b>Setup Server-Side Pagination on List</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page shows how to integrate Kafka for streaming real-time data in your app.
Implement server-side pagination to optimize list performance.
</div>
</a>
</div>

<div className="containerGridSampleApp">
<!-- Setup Polling -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/setup-polling">
<div className="containerHead">
<div className="containerHeading">
<b>Setup Polling</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This guide explains how to set up polling to fetch data at regular intervals, useful for fetching real-time data in situations where WebSockets are not ideal.
</div>
</a>
</div>


---

## Advanced Customizations
## Advanced Customization

<div className="containerGridSampleApp">
<!-- Create Custom Widgets Using Iframe -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/Create-Custom-Widgets-Using-Iframe">
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-one" href="/build-apps/how-to-guides/set-up-websockets">
<div className="containerHead">
<div className="containerHeading">
<b>Create Custom Widgets Using Iframe</b>
<b>Set Up WebSockets</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
Learn how to create custom widgets for unique requirements, such as calendars or social media embeds, using Iframes.
Learn how to integrate WebSocket connections into your Appsmith applications.
</div>
</a>
<!-- Post Messages Between App and Iframe -->
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/Communicate-Between-an-App-and-Iframe">
<a className="containerAnchor containerColumnSampleAppNoGradient columnGrid column-two" href="/build-apps/how-to-guides/export-audit-logs">
<div className="containerHead">
<div className="containerHeading">
<b>Communicate with Iframe Widget</b>
<b>Export Audit Logs</b>
</div>
</div>
<hr className="gradient-hr" />
<div className="containerDescription">
This page explains how to establish secure cross-origin communication between your Appsmith app and an embedded Iframe widget.
Set up and manage audit logs to track application changes.
</div>
</a>
</div>
8 changes: 0 additions & 8 deletions website/docs/connect-data/reference/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,6 @@ description: This page provides reference documentation for Appsmith's datasourc

This page provides reference documentation for Appsmith's datasource connections, query settings, and supported APIs. Browse the sections below to explore detailed references for connecting and configuring your data.

---
---
sidebar_position: 1
description: Find resources for managing your data in Appsmith.
---

# Datasources

Appsmith offers plug-and-play support for many databases and the RESTful API interface for seamless integration with other tools. Appsmith supports the following databases and APIs.


Expand Down

0 comments on commit 6d0c36c

Please sign in to comment.