---
title: Usage
---

# Usage

## Getting Started

You can quickly learn how to access generic abilities in your panel app development using basic JavaScript or Ray & SDM integration with the following example code snippets:

### Basic use

Here's an example of accessing generic abilities using basic JavaScript:

```ts
import { SmartAlarmAbility } from '@ray-js/panel-sdk';

// Create an instance of SmartAlarmAbility
const alarm = new SmartAlarmAbility().init();

// Use the functionalities of SmartAlarmAbility
alarm.getBuiltInAlarmList(params)
  .then(result => {
    // Handle the returned result
  })
  .catch(error => {
    // Handle error cases
  });
```

### Ray & SDM

Here's an example of accessing generic abilities using Ray and SDM. By integrating with SDM, you can enjoy better TypeScript type hints and the development experience provided by React Hooks:

**src/devices/index.ts**

> Create a smart device model for the sensor with built-in alarm capability

```ts
import { SmartDeviceModel, SmartAlarmAbility } from '@ray-js/panel-sdk';

const options = {
  abilities: [new SmartAlarmAbility()],
};

const devices = {
  sensor: new SmartDeviceModel<SmartDeviceSchema, { alarm: SmartAlarmAbility }>(options)
};
```

**src/app.tsx**

> Access the React ecosystem through SdmProvider

```tsx
import React from 'react';
import 'ray';
// Import other dependencies
import { kit, SdmProvider } from '@ray-js/panel-sdk';
import { devices } from '@/devices';
 
const { initPanelEnvironment } = kit;
 
interface Props {
  children: React.ReactNode;
}
 
initPanelEnvironment({ useDefaultOffline: true });
 
export default class App extends React.Component<Props> {
  onLaunch() {
    console.info('=== App onLaunch');
  }
 
  render() {
    return (
      <SdmProvider value={devices.sensor}>{this.props.children}</SdmProvider>
    );
  }
}
```

**src/pages/home.tsx**

> Fetch the alarm list and display it using TyList

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useBuiltInAlarm } from '@ray-js/panel-sdk';
import { AlarmList } from '@ray-js/api/lib/cloud/interface';
import TyList from '@ray-js/components-ty-cell';
import TySwitch from '@ray-js/components-ty-switch';

function PageSdmAlarm() {
  const { loading, data, getBuiltInAlarmList, setBuiltInAlarmStatus } = useBuiltInAlarm();

  React.useEffect(() => {
    getBuiltInAlarmList();
  }, []);

  const handleValueChange = React.useCallback(
    (item: AlarmList) => (value: boolean) => {
      setBuiltInAlarmStatus({ disabled: !value, ruleIds: item.id });
    },
    []
  );

  const rowKey = React.useCallback((item: AlarmList) => item.id, []);

  console.log('=== rerender builtInAlarm', data, loading);
  return (
    <View>
      <TyList<AlarmList>
        dataSource={data}
        renderItem={item => (
          <TyList.Item
            key={item.id}
            title={item.name}
            content={<TySwitch checked={item.enabled} onChange={handleValueChange(item)} />}
          />
        )}
        rowKey={rowKey}
      />
    </View>
  );
}
```