Here's some sample code demonstrating a basic REST callout from an LWC component using Apex:

LWC component (lwcMyComponent.js):

Explanation:

1. We import necessary modules: LightningElement for the component base, api and track for reactive properties, and getDataFromApex from the Apex wrapper class (replace with your actual class name).

2. The component has two reactive properties: data to store the response from the API and error to handle any errors during the callout.

3. The handleClick method is triggered on a button click or any user interaction.

4. Inside handleClick, we call the getDataFromApex method from the Apex wrapper. This method should handle the actual REST callout logic.

5. The call to getDataFromApex uses .then and .catch for handling successful responses and errors respectively.

6. On success, the response data is stored in the data property.

7. In case of errors, the error object is stored in the error property for handling in the component template (e.g., displaying an error message).

Apex Wrapper Class (apexCalloutWrapper.cls):

Explanation:

1. This Apex class exposes an @AuraEnabled method getDataFromApex accessible from LWC.

2. The method defines the API endpoint URL (replace with your actual URL).

3. It uses the Http class to create an HttpRequest object specifying the URL and HTTP method.

4. The h.send method sends the request and captures the response.

5. On successful response (status code 200), the response body is parsed as JSON and returned as a Map.

6. In case of errors, an AuraHandledException is thrown with details for handling in LWC.

Note:

• Remember to replace the placeholder values (URL, Apex method name) with your specific API details and class name.
• Configure Remote Site Settings in Salesforce to allow access to the external API endpoint.
• This is a basic example. You might need to modify it based on your API requirements (headers, request body, etc.).

There are two main ways to pass parameters between LWC components in Salesforce:

1. Using Public Properties with the @api decorator:

This method is ideal when there's a parent-child relationship between the components. Here's how it works:

• Parent Component:

  1. Define a property in the parent component's JavaScript file.
  2. Mark the property with the @api decorator to make it accessible by the child component.
  3. Assign a value to the property and pass it down to the child component using the component tag.

• Child Component:

  1. Import the parent component.
  2. Access the public property using the parent component's tag followed by a dot notation (e.g., parentComponentName.propertyName).
  3. Use the received value in the child component's logic or template.

Here's an example:

Parent Component (parent.js):

Parent Component (parent.html):

Child Component (child.js):

2. Using Lightning Message Service (LMS) for Non-Parent-Child Communication:

This method is useful when the components don't have a direct parent-child relationship. LMS provides a pub/sub mechanism for components to communicate with each other.

• Publisher Component:

  1. Create a new message channel using new MessageContext(this).
  2. Use the publish method of the message channel to send a message with data.

• Subscriber Component:

  1. Subscribe to the message channel using subscribe method.
  2. Define a callback function to receive messages and handle the data.

Here are some resources for further learning:

• Salesforce Documentation on LWC Properties: https://developer.salesforce.com/docs/platform/lwc/guide/js-props-intro.html
• Salesforce Documentation on Lightning Message Service: https://developer.salesforce.com/docs/component-library/bundle/lightning-message-service

FORM_FACOTR

You can use the FORM_FACTOR to determine the device type, however while experimenting this seems to work only in mobile app and not a mobile browser.

To use this module you need to import it like below.

import FORM_FACTOR from '@salesforce/client/formFactor'

The FORM_FACTOR can have below values based on the type of the device.

• Large - If the device is a desktop.
• Medium - If the device is a tablet.
• Small - A phone client

navigator.userAgent 

This seems to work both with mobile apps and the mobile browser. Add the below method to your LWC JS file

 This post explains how to import external Javascript and CSS files into a custom lighting component. The first section deals with Aura Component, whereas the later sections explains the same for a LWC component.

STEP 1:

Download the CSS and JS files. Upload them as a static resource. For this example, let's pick bootstrap. Get bootstrap v4.5 from https://getbootstrap.com/docs/4.5/getting-started/download/ and click the first download button.

Upload the ZIP file as a Static Resource with name 'bootstrap'.

In the meanwhile, let's look at the structure of the zip file on your local machine. This would come in handy when referring the files in your component.

Download Jquery from https://jquery.com/download/ and upload the file as a Static resource with name 'jquery'

STEP 2:

Aura Component

Refer the CSS files and JS files in the Aura Component.

STEP 2:

LWC Component

Refer the CSS and JS files in LWC Component.