Added internal links

Author: pinkeshmars

docs/resources/ui-building-blocks/components/built-in-components/calendar.md

@@ -336,7 +336,7 @@ By default, the calendar title (displaying the current month-year) and the icon
 
 <div style={{
     position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    paddingBottom: 'calc(35.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
     height: 0,
     width: '100%'}}>
     <iframe 

docs/resources/ui-building-blocks/components/built-in-components/chart/chart.md

@@ -16,9 +16,9 @@ The chart widget is used to represent the information in a graphical format. You
 
 You can add the following types of charts:
 
-1. [Line Chart](#)
-2. [Bar Chart](#)
-3. [Pie Chart](#)
+1. [Line Chart](line-chart.md)
+2. [Bar Chart](bar-chart.md)
+3. [Pie Chart](pie-chart.md)
 
 
 ## Customizing chart
@@ -113,7 +113,7 @@ You can change the appearance of the legend box by following the instructions be
 To customize the legend text and indicator:
 
 1. First, [enable the legend](#showing-legend).
-2. To style the legend text, scroll down to the **Legend Properties** > **Legend Text Properties** and change the style as per [here](#).
+2. To style the legend text, scroll down to the **Legend Properties** > **Legend Text Properties** and change the style as per [here](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text.md#common-text-styling-properties).
 3. To add space between the indicator and the text, adjust the **Text Padding** property.
 4. You can change the indicator size by entering a value inside the **Indicator Size** property.
 5. To create rounded corners around the indicator, you can use the **Indicator Border Radius** property.
@@ -317,7 +317,7 @@ To display numbers on the X-axis:
 
 1. Select the **Chart** widget, head over to the properties panel, and scroll down to the **Chart Properties** section.
 2. Scroll down to the **X Axis Properties** and enable the **Show Label** option.
-3. When it comes to displaying numbers, it's usually acceptable to show up to two digits as is. However, if the number exceeds that limit, it's recommended to set the **Label Format Type** to **Number** and configure the appropriate [**Number Format Options**](#).
+3. When it comes to displaying numbers, it's usually acceptable to show up to two digits as is. However, if the number exceeds that limit, it's recommended to set the **Label Format Type** to **Number** and configure the appropriate **Number Format Options**.
 4. Enter the value in the **Label Interval** input box.
 5. You can also customize the appearance of the numbers.
 
@@ -432,7 +432,7 @@ To display numbers on the Y axis:
 
 1. Select the **Chart** widget, head over to the properties panel, and scroll down to the **Chart Properties** section.
 2. Scroll down to the **Y Axis Properties** and enable the **Show Label** option.
-3. When it comes to displaying numbers, it's usually acceptable to show up to two digits as is. However, if the number exceeds that limit, it's recommended to set the **Label Format Type** to **Number** and configure the appropriate [**Number Format Options**](#).
+3. When it comes to displaying numbers, it's usually acceptable to show up to two digits as is. However, if the number exceeds that limit, it's recommended to set the **Label Format Type** to **Number** and configure the appropriate **Number Format Options**.
 4. Enter the value in the **Label Interval** input box.
 5. You can also customize the appearance of the numbers.
 

docs/resources/ui-building-blocks/components/built-in-components/creditcardform.md

@@ -8,8 +8,6 @@ sidebar_position: 7
 # CreditCardForm
 The CreditCardForm widget allows users to enter their credit card details such as card number, expiry date, and CVV.
 
-You can use this widget when you want to accept payment via credit card while using the [Braintree payment](#) method.
-
 ## Adding CreditCardForm widget
 
 Here's an example of how you can add the CreditCardForm widget to your project:

docs/resources/ui-building-blocks/components/built-in-components/datatable.md

@@ -48,7 +48,7 @@ Let's see how to add a DataTable widget by building an example that shows a list
 
 The steps to add DataTable and display the employees' details are:
 
-1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette) and locate the **DataTable** widget under the **Layout Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
+1. Open the [Widget Palette](../../../../intro/flutterflow-ui/widget-palette) and locate the **DataTable** widget under the **Layout Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
 2. It adds two types of predefined widgets:
     1. **DataTableHeader**: This refers to the top row of the table, which displays the names of the columns. To change its text, click on the **DataTableHeader > Text** widget, move to the properties panel and give it a name.
     2. **DataTableCell**: This displays the actual data. By default, it comes with the Text widget. However, you can replace it with any other widget based on your requirements.
@@ -194,7 +194,7 @@ List<EmployeesRecord> sortMyData(
 
 ## Searching
 
-You can add search functionality to the DataTable widget using our Simple Search feature. However, for this specific widget, instead of using a [Conditional Builder](#) widget, you can directly utilize the [Conditional Value](#) to determine which result to display based on the `IsShowFullList` variable.
+You can add search functionality to the DataTable widget using our Simple Search feature. However, for this specific widget, instead of using a [Conditional Builder](../../../../ff-concepts/layout/responsive-widgets/conditional-builder-widget.md) widget, you can directly utilize the [Conditional Value](../../../../resources/control-flow/functions/conditional-logic.md#conditional-value-ifthenelse) to determine which result to display based on the `IsShowFullList` variable.
 
 ![searching-through-table](imgs/searching-through-table.avif)
 
@@ -228,13 +228,13 @@ You might want to allow users to select one or more of its rows for tasks like e
 </div>
 <p></p>
 
-To achieve this, create a [page state variable](#) to store the selected list. Upon button click, update this variable with the chosen selections from the DataTable. **Note that** the DataTable provides a list of selected row indices; you'll need a [custom function](#) to retrieve the actual rows corresponding to these indices.
+To achieve this, create a page state variable to store the selected list. Upon button click, update this variable with the chosen selections from the DataTable. **Note that** the DataTable provides a list of selected row indices; you'll need a [custom function](../../../../ff-concepts/adding-customization/cloud-functions.md) to retrieve the actual rows corresponding to these indices.
 
 Here are the exact steps:
 
-1. First, create a [page state](#) variable that will hold the list of selected rows.
+1. First, create a [page state](../../../../resources/ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state) variable that will hold the list of selected rows.
 2. Select the **DataTable**, move to the **Properties Panel > Paginated Data Table Properties >** turn on the **Selectable** toggle.
-3. On button click, [update the page state](#) variable with the selected rows. While adding this action, use the following custom function to retrieve the selected items based on the indices. You can get the list of selected rows indices via **Widget State > DataTable Selected Rows**.
+3. On button click, [update the page state](../../../../resources/ui-building-blocks/pages/page-lifecycle.md#update-page-state-action) variable with the selected rows. While adding this action, use the following custom function to retrieve the selected items based on the indices. You can get the list of selected rows indices via **Widget State > DataTable Selected Rows**.
 4. Optionally, you could pass this variable to a new page to display the selection.
 
 Custom function:
@@ -320,7 +320,7 @@ To do so:
 1. Select the **DataTable** widget.
 2. Select **Actions** from the Properties panel and open **Action Flow Editor**.
 3. Select **On Page Changed**. This callback gives you the **Current Row Index**, which is the index of the first row of a new page. For example, if you have 25 items (0-24) on the current page, the **Current Row Index** value will be 25. This is helpful in APIs that fetch a fixed set of data by specifying a starting position ([offset](https://developer.box.com/guides/api-calls/pagination/offset-based/)).
-4. Now, add an action to call the paginated API (that returns the result in chunks). See [how to add the paginated API](#) call by adding query parameters. For this example, we use this API: https://reqres.in/api/users?per_page=7&page=1. **Note**: this API uses page-based rather than offset-based pagination, requiring manual adjustment of the page variable.
+4. Now, add an action to call the paginated API (that returns the result in chunks). See [how to add the paginated API](../../../../resources/control-flow/backend-logic/api/rest-api.md#query-parameters) call by adding query parameters. For this example, we use this API: https://reqres.in/api/users?per_page=7&page=1. **Note**: this API uses page-based rather than offset-based pagination, requiring manual adjustment of the page variable.
 5. On the success of the API call, you can add an action to append the new data in the current list. For this, you can add the following custom function to add new results to existing data.
 
 ```dart

docs/resources/ui-building-blocks/components/built-in-components/getting-started.md

@@ -13,7 +13,7 @@ The PinCode widget allows you to enter the PIN or OTP. You could use this widget
 
 To add a PinCode widget:
 
-1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette) and locate the **PinCode** widget under the **Base Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
+1. Open the [Widget Palette](../../../../intro/flutterflow-ui/widget-palette) and locate the **PinCode** widget under the **Base Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
 2. To increase the pin length (number of values users can enter), move to the properties panel, see the **Pin Length** property, and enter the value. **Note**: You can only set this value up to 8.
 3. If you are using this widget to get a secret PIN from users, you can obscure it with a special character. To do so, enable the **Obscure Text** toggle and select the **Obscuring Character** among the *,-,?, and •.
 4. You can also enable/disable the **Hint Text** toggle and select the **Hint Character** displayed when you haven't entered anything.

docs/resources/ui-building-blocks/components/built-in-components/pincode.md

@@ -40,7 +40,7 @@ The SwipeableStack is a widget designed to stack cards or content layers that us
 
 To add a Stack widget:
 
-1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette) and locate the **SwipeableStack** widget under the **Layout Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
+1. Open the [Widget Palette](../../../../intro/flutterflow-ui/widget-palette) and locate the **SwipeableStack** widget under the **Layout Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
 2. By default, it adds four cards and is represented as **SwipeableStack Page**. To see another page in the canvas, move to the **Properties Panel >** set the **Active Page** to the card you want to see.
 3. To add a new card, move to the **Properties Panel > Active Page >** click **+ Add Page**.
 4. To delete any card, select the **SwipeableStack Page** (which you want to delete) from the widget tree or the canvas area and press the **Delete** key on the keyboard.