DEV Community: HarmonyOS

Enabling .bin File Sharing on HarmonyOS with Custom UTDs and Skills (Fix ‘No Available App to Open’)

HarmonyOS — Thu, 09 Jul 2026 01:57:00 +0000

Read the original article：Enabling .bin File Sharing on HarmonyOS with Custom UTDs and Skills (Fix ‘No Available App to Open’)

Enabling .bin File Sharing on HarmonyOS with Custom UTDs and Skills (Fix ‘No Available App to Open’)

Requirement Description

On phones, long-pressing a .bin file in File Manager and tapping Share shows “No available way to open”. Images/videos invoke apps correctly. We need to enable sharing/receiving of .bin by defining and declaring a custom UTD and updating the target app’s skills so it appears on the share/open sheet.

Background Knowledge

HarmonyOS uses Uniform Data Type Descriptors (UTDs) to identify file/data types. Apps can declare custom UTDs and express support via skills. If no prebuilt UTD exists for a given extension, HarmonyOS may generate a dynamic UTD (prefix flex.). Declaring your own UTD and mapping skills allows your app to appear as a handler for that file type. See Uniform Data Type Descriptors (overview). (Huawei Developer)

Tip: getParamByName() in ArkUI Navigation returns an array because it aggregates params for all same-named destinations in the stack—useful when diagnosing route parameter handling while testing share flows. (Huawei Developer)

Implementation Steps

Declare a skill for opening the file

In your ability’s module.json5, add a skills item indicating you can view files with your custom UTD:

{
  "skills": [
    {
      "actions": [
        "ohos.want.action.viewData"
      ],
      "uris": [
        {
          "scheme": "file",
          "linkFeature": "FileOpen",
          "type": "com.example.myapplication.bin"
        }
      ]
    }
  ]
}

type equals your custom TypeId from the UTD declaration file.

Provide the custom UTD declaration

Create resources/rawfile/utd.json5 and declare your type:

{
  "UniformDataTypeDeclarations": [
    {
      "TypeId": "com.example.myapplication.bin",
      "BelongingToTypes": [ "general.object" ],
      "FilenameExtensions": [ ".bin" ],
      "MIMETypes": [ "application/octet-stream" ],
      "Description": "My document.",
      "ReferenceURL": "https://www.mycompany.com/my-document"
    }
  ]
}

- TypeId must be unique (e.g., ${bundleName}.${type}), using only digits, letters, - and ..

(Alternative) Support a dynamic UTD (“flex.*”)

If the sender yields a dynamic UTD for .bin (for example, flex.zh45depjomjuw4), the receiver can also declare a sendData skill for that UTD to appear in the share panel:

{
  "skills": [
    {
      "actions": [ "ohos.want.action.sendData" ],
      "uris": [
        {
          "scheme": "file",
          "utd": "flex.zh45depjomjuw4",
          "maxFileSupported": 1
        }
      ]
    }
  ]
}

- Dynamic UTDs typically start with flex..

Build, install, and test

- Rebuild the app and install.
- In Files: create or pick a .bin, long-press → Share (or Open with) → your app should appear.
- If your app is the sender, ensure you set the Want with the matching action/URI/UTD so the platform can resolve the target. See Want references. (Huawei Developer)

Code Snippet

module.json5 (skills): see Step 1/3 above.
resources/rawfile/utd.json5: see Step 2 above.

// Index.ets — Wearable demo for UTD lookup (.bin) — HarmonyOS 6 / API 19+

import uniformTypeDescriptor from '@ohos.data.uniformTypeDescriptor'

@Entry
@Component
struct Index {
  @State private extInput: string = '.bin'
  @State private detectedUtd: string = ''
  @State private note: string = 'Enter extension (e.g., .bin) and tap Detect.'

  private detect(): void {
    try {
      const utd: string = uniformTypeDescriptor.getUniformDataTypeByFilenameExtension(this.extInput)
      this.detectedUtd = utd
      this.note = utd.startsWith('flex.')
        ? 'Dynamic UTD detected (flex.*). Consider declaring custom TypeId and/or accept this flex.* in skills.'
        : 'Predefined/custom UTD detected. Make sure your skills use this TypeId.'
    } catch (e) {
      this.detectedUtd = ''
      this.note = `Lookup failed: ${JSON.stringify(e)}`
    }
  }

  build() {
    Column({ space: 8 }) {
      Text('UTD Share Demo (Wearable)').fontSize(16).fontWeight(FontWeight.Medium)
        .fontColor(Color.Black)

      Text('Check the UTD the system resolves for an extension.').fontSize(12).opacity(0.8)
        .fontColor(Color.Black)


      Row({ space: 6 }) {
        TextInput({ placeholder: '.bin', text: this.extInput })
          .onChange((v: string) => this.extInput = v)
          .width('60%')
          .fontColor(Color.Black)
          .backgroundColor(Color.White)

        Button('Detect').onClick(() => this.detect())
      }

      Column({ space: 4 }) {
        Text(`UTD: ${this.detectedUtd || '-'}`).fontSize(14)
          .fontColor(Color.Black)

        Text(this.note).fontSize(12).maxLines(3)
          .fontColor(Color.Black)
      }
      .width('100%')
      .padding(8)
      .backgroundColor(0xFFFFFF)
      .borderRadius(12)
    }
    .width('100%')
    .height('100%')
    .padding(12)
    .backgroundColor(0xF0F6FF)
  }
}

Test Results

Verified on API 19 Release with HarmonyOS 5.1.1/6 SDK using DevEco Studio 5.1.1+: the app appears on the share/open sheet for .bin.

Limitations or Considerations

Choose a stable TypeId; changing it requires coordinated sender/receiver updates.
Some sources may still emit dynamic UTDs; handle both custom TypeId and flex.* cases.
Keep MIME (application/octet-stream) and extension mapping accurate.
For multi-file share, adjust maxFileSupported.

How to use layoutWeight for child element size weighting in a container?

HarmonyOS — Thu, 09 Jul 2026 01:54:00 +0000

Read the original article：How to use layoutWeight for child element size weighting in a container?

Problem Description

How can I allocate the size of a child component in a parent container according to a certain proportion?

Background Knowledge

layoutWeight (value: number | string): Sets the layout weight of the component, so that the component size is allocated in the main axis direction of the parent container (Row/Column/Flex) based on the weight.

When the size of the parent container is determined, the element that is not set with the layoutWeight attribute or whose effective value of the layoutWeight attribute is 0 is preferentially placed. The space left on the main axis after the element is placed is called the remaining space on the main axis. The child elements that are set with the layoutWeight attribute and whose effective value of the layoutWeight attribute is greater than 0 are allocated with the size from the remaining space on the main axis according to the weight ratio set for each element. During the allocation, the size setting of the element itself is ignored.
This property is effective only in row, column, or flex layout.
If the layoutWeight attribute is set to a value greater than 0 for a child element in the container, all child elements will not be arranged based on the flexShrink and flexGrow attributes.

Solution

The layoutWeight attribute is used to dynamically adjust the size ratio of child elements in a core container. This container is applicable to scenarios that require flexible layouts. The following uses Row and Column as examples to describe how to allocate layoutWeight in the horizontal and vertical directions.

Row container: horizontal layout (from left to right). The layoutWeight attribute is used to set the proportion of the child element in the horizontal direction .

@Entry
@Component
struct BottomWithBar {
  build() {
    Column() {
      Row() {
        Row() {
          Text('Left side')
            .fontColor(Color.Black);
        }
        .justifyContent(FlexAlign.Center)
        .height('100%')
        .backgroundColor('#F1F3F5')
        .layoutWeight(2); // Occupies 2/3 of the width
        Row() {
          Text('Right side.')
            .fontColor(Color.Black);
        }
        .justifyContent(FlexAlign.Center)
        .height('100%')
        .backgroundColor('#E5E5EA')
        .layoutWeight(1); // Occupies 1/3 of the width
      };
    }
    .width('100%')
    .height('100%');
  }
}

Column container: vertical layout (from top to bottom). The layoutWeight attribute is used to set the proportion of the child element in the vertical direction of .

@Entry
@Component
struct BottomWithBar2 {
  build() {
    Column() {
      Column() {
        Row() {
          Text('Top')
            .fontColor(Color.Black);
        }
        .justifyContent(FlexAlign.Center)
        .width('100%') // Because it is a Column() component, the width is set so that it can be observed.
        .backgroundColor('#F1F3F5')
        .layoutWeight(1); // Occupying half of the height
        Row() {
          Text('Bottom part')
            .fontColor(Color.Black);
        }
        .justifyContent(FlexAlign.Center)
        .width('100%') // Because it is a Column() component, the width is set so that it can be observed.
        .backgroundColor('#E5E5EA')
        .layoutWeight(1); // Occupying half of the height
      };
    }
    .width('100%')
    .height('100%');
  }
}

Verification Result

Solution 1 effect:

Solution 2 effect:

FAQs

Q: How do I specify the distance between a component and the screen edge? For example, there are two child components in a Row container: a Text component on the left and a TextInput component on the right. The Text component on the left has a fixed width, while the TextInput component on the right has an adaptive width. The Text component should be 16 vp away from the left screen edge, and the TextInput component should be 16 vp away from the right screen edge.
A: Set the width of the Row component to the screen width, set the left and right internal padding to 16vp, set the Text component to a fixed width, and add the layoutWeight attribute to the TextInput component.
The sample code is as follows:

@Entry
@Component
struct Index3 {
  controller: TextInputController = new TextInputController();

  build() {
    Row({ space: 16 }) {
      Text('Example text.')
        .textAlign(TextAlign.Center)
        .backgroundColor('#F1F3F5')
        .borderRadius(20)
        .height(40)
        .width(80)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431');

      TextInput({ placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .layoutWeight(1);
    }
    .padding({ left: 16, right: 16 })
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center);
  };
}

Written by Bunyamin Akcay

RichEditor sets content to adapt to width automatically

HarmonyOS — Thu, 09 Jul 2026 01:50:00 +0000

Read the original article：RichEditor sets content to adapt to width automatically

Requirement Description

Unlike the Text component, the RichEditor component cannot automatically adjust its own width according to the content.

Background Knowledge

RichEditor: A component that supports mixed text and image layout and interactive text editing. It is typically used to respond to user input operations involving mixed content of text and images, such as a comment area that allows both text and images.
onDidChange: A callback triggered after the component performs add or delete operations. If no actual addition or deletion occurs in the text, this callback is not triggered.
onReady: A callback triggered after the RichEditor component has been fully initialized.

Implementation Steps

Dynamically calculate the width of the RichEditor component based on the text width, border width, and padding width.

Code Snippet

import { display } from '@kit.ArkUI';

@Entry
@Component
export struct RichEditorWidthChange {
  controller: RichEditorController = new RichEditorController();
  @State textStr: string = 'text';
  @State richEditorWidth: number | string = '100%';
  @State richEditorPadding: number = 12
  @State richEditorBorder: number = 1
  private displayWidth: number = this.getUIContext().px2vp(display.getDefaultDisplaySync().width);

  // Avoid resize mode
  aboutToAppear(): void {
    this.getUIContext().setKeyboardAvoidMode(1)
    console.info('displayWidth: ', this.displayWidth)
  }

  getLayoutWidth() {
    let layoutManager: LayoutManager = this.controller.getLayoutManager();
    let lineCount = layoutManager.getLineCount()
    let lineWidthSum = 0;
    for (let i = 0; i < lineCount && layoutManager.getLineMetrics(i); i++) {
      lineWidthSum = lineWidthSum + layoutManager.getLineMetrics(i).width;
    }
    lineWidthSum = this.getUIContext().px2vp(lineWidthSum) + this.richEditorPadding * 2 + this.richEditorBorder * 2
    // If total text width exceeds current window width,
    this.richEditorWidth = lineWidthSum >= this.displayWidth ? '100%' : lineWidthSum;
  }

  build() {
    Scroll() {
      Column() {
        RichEditor({ controller: this.controller })

          .padding(this.richEditorPadding)
          .borderRadius(20)
          .borderColor(Color.White)
          .borderWidth(this.richEditorBorder)
          .backgroundColor('#ff565656')
          .width(this.richEditorWidth)
          .height('auto')
          .onReady(() => {
            this.controller.addTextSpan(this.textStr);
          })
          .onDidChange(() => {
            // Wait 10ms to ensure that after addTextSpan adds text,
            // layoutManager.getLineCount() can correctly detect the current line count
            setTimeout(() => {
              this.getLayoutWidth()
            }, 10)
          })
          .animation({
            duration: 200
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('90%')
      .height('100%')
      .margin(10)
    }
  }
}

Test Results

Limitations or Considerations

This example supports API Version 19 Release and above.
This example supports HarmonyOS 5.1.1 Release SDK and above.
This example must be compiled and run using DevEco Studio 5.1.1 Release or above.

Written by Bunyamin Akcay

How to Solve the Problem of List Not Scrolling After Refreshing Data in LazyForEach

HarmonyOS — Wed, 08 Jul 2026 01:46:00 +0000

Read the original article：How to Solve the Problem of List Not Scrolling After Refreshing Data in LazyForEach

Problem Description

When using LazyForEach to load List items, after reassigning the data array to refresh data and notifying the component to refresh via the onDataReloaded method, the List component stops scrolling after a certain distance. The issue is illustrated below:

Problem code example:

// Index.ets
import { BaseDataSource } from './BaseDataSource';
import { StringListModel } from './StringListModel';

@Entry
@Component
struct MyComponent {
  private dataSource: BaseDataSource<string> = StringListModel.instance().getDataSource();

  aboutToAppear() {
    StringListModel.instance().load()
  }

  aboutToDisappear(): void {
    StringListModel.instance().release()
  }

  build() {
    Column() {

      Button('Refresh Data - Add hello')
        .onClick(() => {
          StringListModel.instance().loadByKeyword('hello')
        })

      List({ space: 3 }) {
        LazyForEach(this.dataSource, (item: string) => {
          ListItem() {
            Row() {
              Text(item).fontSize(14)
                .onAppear(() => {
                  console.info('appear:' + item )
                })
            }
            .justifyContent(FlexAlign.Center)
            .width('100%')
            .margin({ left: 10, right: 10 })
          }
        }, (item: string) => item)
      }
      .height(0)
      .layoutWeight(1)
      .onReachEnd(() => {
        StringListModel.instance().loadMore()
      })
    }
  }
}

// BaseDataSource.ets
export class BaseDataSource<T> implements IDataSource {
  private datas: Array<T> = []
  private listeners: Array<DataChangeListener> = []

  totalCount(): number {
    return this.datas.length
  }

  getData(index: number): T {
    return this.datas[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    let index = this.listeners.indexOf(listener)
    if (index < 0) {
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    let index = this.listeners.indexOf(listener)
    if (index >= 0) {
      this.listeners.splice(index, 1)
    }
  }

  private notifyDataReloaded() {
    for (let listener of this.listeners) {
      listener.onDataReloaded()
    }
  }

  private notifyDataAdd(index: number, addCount: number = 1) {
    for (let listener of this.listeners) {
      let addOperation: DataAddOperation = {
        type: DataOperationType.ADD,
        index,
        count: addCount
      }
      listener.onDatasetChange([addOperation])
    }
  }

  private notifyDataDelete(index: number, delCount: number = 1) {
    for (let listener of this.listeners) {
      let delOperation: DataDeleteOperation = {
        type: DataOperationType.DELETE,
        index,
        count: delCount
      }
      listener.onDatasetChange([delOperation])
    }
  }

  private notifyDataChange(index: number) {
    for (let listener of this.listeners) {
      listener.onDataChange(index)
    }
  }

  setDatas(datas: Array<T>) {
    this.datas = datas
    this.notifyDataReloaded()
  }

  addData(data: T) {
    this.addDatas([data])
  }

  addDatas(datas: Array<T>) {
    let insertIndex = this.datas.length
    let addCount = datas.length
    this.datas.push(...datas)
    this.notifyDataAdd(insertIndex, addCount)
  }

  delData(index: number) {
    this.datas.splice(index, 1)
    this.notifyDataDelete(index)
  }

  delAllData() {
    let delCount = this.datas.length
    this.datas = []
    this.notifyDataDelete(0, delCount)
  }

  changeData(index: number, data: T) {
    if (index < 0 || index >= this.datas.length) {
      return
    }
    this.datas[index] = data
    this.notifyDataChange(index)
  }

  release() {
    this.datas = []
    this.listeners = []
  }
}

// DataLoader.ets
export class DataLoader {
  static async getByPage(page: number, pageSize: number) {
    let datas: Array<string> = []
    for (let i = 0; i < pageSize; i++) {
      datas.push(`Page ${page}-${i}`)
    }
    return datas
  }

  static async getByKeyWord(keyword: string, page: number, pageSize: number) {
    let datas: Array<string> = []
    for (let i = 0; i < pageSize; i++) {
      datas.push(`${keyword}-Page ${page}-${i}`)
    }
    return datas
  }

  static async getByFirstLetter(letter: string, page: number, pageSize: number) {
    let datas: Array<string> = []
    for (let i = 0; i < pageSize; i++) {
      datas.push(`${letter}-Page ${page}-${i}`)
    }
    return datas
  }
}

// StringListModel.ets
import { BaseDataSource } from './BaseDataSource'
import { DataLoader } from './DataLoader'

const MIN_PAGE_SIZE = 30

export class StringListModel {
  private static sInstance: StringListModel | null
  private stringDataSource: BaseDataSource<string> = new BaseDataSource()
  private curPage: number = 0
  private pageSize: number = MIN_PAGE_SIZE
  private hasMoreData: boolean = true
  private keyword?: string
  private firstLetter?: string

  private constructor() {
  }

  static instance() {
    if (!StringListModel.sInstance) {
      StringListModel.sInstance = new StringListModel()
    }
    return StringListModel.sInstance
  }

  setPageSize(pageSize: number) {
    if (pageSize >= MIN_PAGE_SIZE) {
      this.pageSize = pageSize
    }
  }

  getDataSource() {
    return this.stringDataSource
  }

  load() {
    this.keyword = undefined
    this.firstLetter = undefined
    this.curPage = 0
    this.hasMoreData = true
    this.loadData(true)
  }

  loadByKeyword(keyword: string) {
    if (this.keyword !== undefined && this.keyword === keyword) {
      return
    }
    this.keyword = keyword
    this.firstLetter = undefined
    this.curPage = 0
    this.hasMoreData = true
    this.loadData(true)
  }

  loadByFirstLetter(firstLetter: string) {
    if (this.firstLetter !== undefined && this.firstLetter === firstLetter) {
      return
    }
    this.firstLetter = firstLetter
    this.keyword = undefined
    this.curPage = 0
    this.hasMoreData = true
    this.loadData(true)
  }

  loadMore() {
    if (!this.hasMoreData) {
      return
    }
    this.curPage++
    this.loadData(false)
  }

  private loadData(isFirstPage: boolean) {
    let loadCallback = (datas: Array<string>) => {
      if (!datas || datas.length === 0) {
        this.hasMoreData = false
        return
      }

      this.hasMoreData = datas.length === this.pageSize
      if (isFirstPage && this.stringDataSource.totalCount() > 0) {
        this.stringDataSource.setDatas(datas)
      } else {
        this.stringDataSource.addDatas(datas)
      }

    }
    if (this.keyword !== undefined) {
      DataLoader.getByKeyWord(this.keyword, this.curPage, this.pageSize).then(loadCallback)
    } else if (this.firstLetter !== undefined) {
      DataLoader.getByFirstLetter(this.firstLetter, this.curPage, this.pageSize).then(loadCallback)
    } else {
      DataLoader.getByPage(this.curPage, this.pageSize).then(loadCallback)
    }
  }

  release() {
    this.stringDataSource.release()
    StringListModel.sInstance = null
  }
}

Background Knowledge

onDataReloaded notifies the component to reload all data. Items with unchanged keys reuse existing subcomponents, while those with changed keys are rebuilt.
onDatasetChange is used for batch data operations. It notifies the component to refresh according to the provided dataOperations array and cannot be mixed with other data manipulation interfaces.

Troubleshooting Process

From the provided code, the custom method notifyDataReloaded calls onDataReloaded to reload data. When onDataReloaded is triggered, subcomponents whose keys remain the same are reused rather than rebuilt. Since refreshing data through onDataReloaded does not change keys, LazyForEach reuses old subcomponents instead of recreating them, causing the List to stop scrolling after a certain distance.

Analysis Conclusion

When refreshing data, a data addition operation should be performed to rebuild subcomponents rather than reuse existing ones.

Solution

Solution 1:

Replace onDataReloaded with onDatasetChange in the notifyDataReloaded method. onDatasetChange supports batch data operations (additions, reloads, etc.) and avoids subcomponent reuse.

  private notifyDataReloaded() {
    for (let listener of this.listeners) {
      let reloadOperation: DataReloadOperation = {
        type: DataOperationType.RELOAD
      }
      listener.onDatasetChange([reloadOperation])
    }
  }

Solution 2: Add data insertion functionality in the setDatas method that calls notifyDataReloaded.

  setDatas(datas: Array<T>) {
    this.datas = datas
    let insertIndex = this.datas.length
    let addCount = datas.length
    this.datas.push(...datas)
    this.notifyDataAdd(insertIndex, addCount)
  }

Solution 3: Modify setDatas to first delete all data before adding new ones.

  if (isFirstPage && this.stringDataSource.totalCount() > 0) {
    this.stringDataSource.delAllData()
    this.stringDataSource.addDatas(datas)
  } else {
    this.stringDataSource.addDatas(datas)
  }

When refreshing data, a data addition operation should be performed to rebuild subcomponents rather than reuse existing ones.

Verification Result

All three approaches achieve the same corrective effect, as shown below:

Written by Bunyamin Akcay

How to Implement Chat List Functionality Using the List Component

HarmonyOS — Wed, 08 Jul 2026 01:42:00 +0000

Read the original article：How to Implement Chat List Functionality Using the List Component

How to Implement Chat List Functionality Using the List Component

Requirement Description

The chat list is an important feature in instant messaging. This example provides several common implementation methods.

Background Knowledge

In HarmonyOS, the List component is used in various scenarios such as product displays, chat pages, and invoice pages. The @Watch decorator is used to monitor state variables. If you need to track changes in a specific state variable, you can use @Watch to set a callback function for it.

Implementation Steps

Scenario 1: Display new data starting from the bottom when received.
Implementation Principle: Use @Watch to monitor changes in the data source. When the data source changes, if the List is not already scrolled to the bottom, automatically scroll the List to the bottom.
Scenario 2: Load the message list from the bottom and click a button to return to the latest position.
Implementation Principle: Setting the stackFromEnd property of the List component to true enables layout loading from the bottom. By binding scrollEdge to the bottom edge of the List, you can achieve a jump back to the latest position.

Note: The property stackFromEnd is supported from API version 19.

Code Snippet / Configuration

Scenario 1:

  @Component
  export struct Chat {
    // This list represents the chat content. Each time a message is sent or received, 
    // the chat content is added to this list.
    // When the list changes, the function scrollerBottom is executed to scroll the list to the bottom.
    @Prop @Watch('scrollerBottom') list: string[] = [];
    scroller: Scroller = new Scroller();

    scrollerBottom() {
      this.scroller.scrollEdge(Edge.Bottom);
    }

    build() {
      // initialIndex represents the index from which the list starts displaying when created.
      // Choosing the last index allows the latest messages at the bottom to be shown.
      // scroller binds the scroll event, working with the List watcher to make sure that
      // whenever messages are sent or received, the view scrolls to the bottom.
      List({ initialIndex: this.list.length - 1, scroller: this.scroller }) {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Text(item)
              .fontWeight(FontWeight.Bold);
          };
        });
      }
      .width('100%')
      .height('100%');
    }
  }

  @Entry
  @Component
  struct ListChat {
    @State message: string[] = [];
    count: number = 0;

    build() {
      Column() {
        Chat({ list: this.message })
          .width('50%')
          .backgroundColor('#F1F3F5');
        Button('New message +1')
          .onClick(() => {
            this.message.push('New message' + (this.count++).toString());
          })
          .margin({ top: 20 })
          .backgroundColor('#0A59F7');
      }
      .height('50%')
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center);
    }
  }

Scenario 2:

  @Entry
  @Component
  struct ListBottom {
    @State listContent: Array<string> = ['Old message'];
    listScroller: ListScroller = new ListScroller();

    build() {
      Column() {
        List({ space: 10, scroller: this.listScroller }) {
          ForEach(this.listContent, (value: string) => {
            ListItem() {
              Text(value);
            }
            .width('90%')
            .height(200)
            .border({
              width: 1,
              radius: 20,
              color: Color.Black
            })
            .backgroundColor('#ffdddddd');
          });
        }
        .width('100%')
        .height('90%')
        .stackFromEnd(true) // Set to true to make the list layout start from the bottom
        .alignListItem(ListItemAlign.Center)
        .scrollBar(BarState.Off)
        .border({
          width: 1,
          color: '#ffdddddd'
        });

        Row() {
          Button('Add')
            .onClick(() => {
              this.listContent.push('New message ' + this.listContent.length.toString());
            });

          Button('Scroll to latest position')
            .onClick(() => {
              this.listScroller.scrollEdge(Edge.Bottom); // Scroll the list to the bottom edge
            });
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceAround);
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.SpaceBetween);
    }
  }

Test Results

Scenario 1:
Scenario 2:

Limitations or Considerations

This example supports API Version 20 Release and above.
This example supports HarmonyOS 6.0.0 Release SDK and above.
This example requires DevEco Studio 6.0.0 Release and above for compilation and execution.

Written by Bunyamin Akcay

How to disable the default animation when using removeByName to delete pages in Navigation?

HarmonyOS — Wed, 08 Jul 2026 01:40:00 +0000

Read the original article：How to disable the default animation when using removeByName to delete pages in Navigation?

Problem Description

When removeByName is used to delete a page in the navigation, an animation is displayed from the bottom. The API document does not provide a parameter for disabling the animation. How do I disable the animation?
The current effect is as follows:

Background Knowledge

customNavContentTransition: Sets the custom transition animation for navigation. The returned from and to parameters are used to obtain the destination page of the exit or entry, including the NavDestination name and sequence number, which can be used to distinguish different NavDestination pages.

Solution

You can use customNavContentTransition to set a custom transition animation. To disable the default animation of removeByName during the exit, set
Navigation to customNavContentTransition. The pages are distinguished by the returned name.

@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfo: NavPathStack = new NavPathStack();
  @State flag: boolean = false;

  aboutToAppear(): void {
    let eventhub = this.getUIContext().getHostContext()?.eventHub;
    eventhub!.on('removeByNameEvent', () => {
      this.flag = true;
    });
  }

  build() {
    Navigation(this.pageInfo) {
      Column({ space: 10 }) {
        Button('Click me to push the second page.')
          .onClick(() => {
            this.pageInfo.pushPathByName('SubPage', null, false);
          });
      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%');
    }
    // Set custom transition animations
    .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => {
      console.info(`current info: ${to.name}, index: ${to.index}, mode: ${to.mode}`);
      console.info(`pre info: ${from.name}, index: ${from.index}, mode: ${from.mode}`);
      console.info(`operation: ${operation}`);
      // Distinguishing specific pages by name.
      if (from.name == 'SubPage' && this.flag === true) {
        this.flag = false;
        let customAnimation: NavigationAnimatedTransition = {
          onTransitionEnd: (isSuccess: boolean) => {
            console.info(`current transition result is ${isSuccess}`);
          },
          timeout: 100,
          // This method is called when the transition starts, and the transition context proxy object is passed as an argument.
          transition: () => {
            if (operation == NavigationOperation.POP) {
              this.getUIContext().animateTo({
                duration: 0, // The duration is set to 0.
              }, () => {
              });
            }
          }
        };
        return customAnimation;
      }
      return undefined;
    });
  }
}

@Builder
export function RegisterBuilder(): void {
  SubPage();
}

@Component
struct SubPage {
  @Consume('pageInfo') pathStack: NavPathStack;

  build() {
    NavDestination() {
      Column({ space: 20 }) {
        Button('removeByName current page.')
          .onClick(() => {
            let eventhub = this.getUIContext().getHostContext()?.eventHub;
            // The flag for distinguishing removeByName events from page return events is set through eventHub.
            eventhub!.emit('removeByNameEvent');
            this.pathStack.removeByName('SubPage');
          });
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Transparent);
    }
    .title('Page 2')
    .width('100%')
    .height('100%');
  }
}

In the module.json5 file in the src/main directory, set the module field to "routerMap": "$profile:router_map" and add the router_map.json file to the src/main/resources/base/profile directory. The following is an example of the router_map.json file.

{
  "routerMap": [
    {
      "name": "SubPage",
      "pageSourceFile": "src/main/ets/pages/SubPage.ets",
      "buildFunction": "RegisterBuilder"
    }
  ]
}

Verification Result

Written by Bunyamin Akcay

How to Center Grid Component Items Vertically

HarmonyOS — Tue, 07 Jul 2026 01:51:00 +0000

Read the original article：How to Center Grid Component Items Vertically

Requirement Description

The Grid component cannot simultaneously support all three of the following: 100% height, child component centering, and drag events.
Specifically:

When height is set to 100%, dragging works, but the child items are not vertically centered.
If you want the items centered, you must set rowsTemplate and columnsTemplate, but then the drag animation is lost.

build() {
  RelativeContainer() {
    Grid() {
      ForEach(this.bottomNavList, (item: TabItem) => {
        GridItem() {
          this.BottomNavItem(item)
        }
      })
    }
    .height('100%')
    .layoutWeight(1)
    .align(Alignment.Center)
    .rowsTemplate('1fr')
    .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
    .maxCount(0)
    .onItemDragStart((_, selectItemIndex: number) => {
      console.info('itemIndex:' + selectItemIndex)
      return this.BottomNavItem(this.bottomNavList[selectItemIndex])
    })
    .onItemDrop((_, itemIndex: number, insertIndex: number) => {
      this.swapBottomNavItemPosition(itemIndex, insertIndex);
    })
    .editMode(true)
    .backgroundColor(Color.Green)
    .supportAnimation(true)
    .align(Alignment.Center)
    .padding({
      left: 10,
      right: 10,
      bottom: 10 // Keep shadows from being cut off
    })
    .alignRules({
      left: { anchor: '__container__', align: HorizontalAlign.Start },
      center: { anchor: '__container__', align: VerticalAlign.Center }
    })

    Row() {
      Text('Long press to drag and reorder')
        .fontSize(20)
        .fontColor(Color.Black)
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .padding({ bottom: 0 })
    .alignRules({
      left: { anchor: '__container__', align: HorizontalAlign.Start },
      bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
    })
  }
  .padding({ bottom: 8 })
  .height('100%')
}

Background Knowledge

The Grid component is a grid container that only supports GridItem child components. Its properties support general attributes, scrollable component common attributes, and attributes like columnsTemplate and rowsTemplate.
columnsTemplate defines the number of columns, fixed column width, or minimum column width. If not set, it defaults to one column. When set to '0fr', the column width is 0, and its GridItem will not be displayed.
supportAnimation determines whether animation is supported. Animation is supported only in scroll mode (when only one of rowsTemplate or columnsTemplate is set).

Implementation Steps

You can add an extra GridItem child and set its component height to 100%, with its width set to 0fr.
This ensures that other GridItem components are vertically centered while keeping the drag animation enabled.

Code Snippet / Configuration

class TabItem {
  icon: string = ''
  appletName: string = ''
  canDelete: boolean = false

  constructor(icon: string, appletName: string, canDelete: boolean) {
    this.icon = icon;
    this.appletName = appletName;
    this.canDelete = canDelete;
  }
}

@Entry
@Component
struct Index {
  longPressTimer: number = 0;
  @State bottomNavList: TabItem[] = [
    new TabItem('app.media.startIcon', 'Home', false),
    new TabItem('app.media.startIcon', 'Message', false),
    new TabItem('app.media.startIcon', 'Contacts', false),
    new TabItem('app.media.startIcon', 'Settings', false),
    new TabItem('app.media.startIcon', 'Mine1', false),
  ]

  $bottomNavList(list: TabItem[]) {
    this.bottomNavList = list;
  }

  swapBottomNavItemPosition(itemIndex: number, insertIndex: number) {
    let copyList = this.bottomNavList;
    let tmpBottomNavItem = copyList.splice(itemIndex, 1);
    copyList.splice(insertIndex, 0, tmpBottomNavItem[0]);
    this.$bottomNavList(copyList);
  }

  build() {
    RelativeContainer() {
      Grid() {
        GridItem() { // Add a separate GridItem at the beginning, set its height to 100%
          Column()
            .height('100%')
        }

        ForEach(this.bottomNavList, (item: TabItem) => {
          GridItem() {
            this.BottomNavItem(item)
          }
        })
      }
      .height('100%')
      .layoutWeight(1)
      .align(Alignment.Center)
      .columnsTemplate('0fr 1fr 1fr 1fr 1fr 1fr') // The first GridItem has width 0fr, so it’s invisible
      .maxCount(0)
      .onItemDragStart((_, selectItemIndex: number) => {
        console.info('itemIndex:' + selectItemIndex)
        return this.BottomNavItem(this.bottomNavList[selectItemIndex - 1]) // Adjust index by -1 for correct display during drag
      })
      .onItemDrop((_, itemIndex: number, insertIndex: number) => {
        this.swapBottomNavItemPosition(itemIndex - 1, insertIndex - 1); // Adjust index by -1 for correct reordering
      })
      .editMode(true)
      .backgroundColor(Color.Green)
      .supportAnimation(true)
      .align(Alignment.Center)
      .padding({
        left: 10,
        right: 10,
        bottom: 10 // Keep shadows from being cut off
      })
      .alignRules({
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        center: { anchor: '__container__', align: VerticalAlign.Center }
      })

      Row() {
        Text('Long press\n to drag and reorder')
          .fontSize(20)
          .fontColor(Color.Black)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .padding({ bottom: 32 })
      .alignRules({
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
      })
    }
    .padding({ bottom: 8 })
    .height('100%')
  }

  // Bottom Tab subcomponent
  @Builder
  BottomNavItem(botttomNav: TabItem) {
    Column() {
      // Purpose: Add padding to prevent shadow clipping during drag
      Stack({ alignContent: Alignment.TopEnd }) {
        Column({ space: 3 }) {
          Image(botttomNav.icon)
            .width(24)
            .aspectRatio(1)
            .draggable(false) // Disable XiaoYi assistant
          Text(botttomNav.appletName)
            .fontSize(6)
            .fontColor(Color.Black)
        }
        .aspectRatio(1)
        .justifyContent(FlexAlign.Center)
        .shadow({ radius: 30, color: 'rgba(0,0,0,0.22)' })
        .borderRadius(12)
        .backgroundColor(Color.White)
        .margin({ top: 2, right: 2 })
        .padding({
          left: 5,
          top: 0,
          right: 5
        })

        Image($r('app.media.startIcon'))
          .width(24)
          .aspectRatio(1)
          .visibility(botttomNav.canDelete ? Visibility.Visible : Visibility.None)
      }
    }
    .layoutWeight(1)
    .padding({
      left: 2,
      right: 2,
      bottom: 2,
      top: 2
    })
  }
}

Note:
This method essentially adds one GridItem as a placeholder to occupy full height, ensuring that other GridItem components remain vertically centered.
Because of this, the drag index values must be adjusted by -1, as shown in the example above.

Test Results

Limitations or Considerations

This example supports API Version 20 Release and above.

It supports HarmonyOS 6.0.0 Beta2 SDK and above.

It must be compiled with DevEco Studio 6.0.0 Beta2 or later.

Written by Bunyamin Akcay

How Do I Resolve the Problem that the Swipe Gestures Can Be Triggered After the Widget Disappears?

HarmonyOS — Tue, 07 Jul 2026 01:38:00 +0000

Read the original article：How Do I Resolve the Problem that the Swipe Gestures Can Be Triggered After the Widget Disappears?

Problem Description

When the Visibility of a component is set to Visibility.None during the triggering of a gesture event, the bound swipe gesture event can still be triggered after the component is hidden.

Background Knowledge

PanGesture is used to add swipe gesture events to components. It determines the current gesture state through onActionStart, onActionUpdate, and onActionEnd.
Gesture Interception Enhancement provides developers with the ability to intercept gesture events for components. This allows for dynamic control over the triggering of gesture events.

Solution

When using Visibility.None to hide a component, the component no longer occupies space. However, the interface for the onActionUpdate callback has not yet been released, and the behavior is still being triggered.
This can be enhanced by using gesture interception. By obtaining the current component's gesture recognizer through the onGestureRecognizerJudgeBegin property, you can set the recognizer's setEnabled method to false when the Visibility is set to None. This indicates that the current gesture recognizer will not call back application events, thereby preventing the component from triggering drag events. An implementation example is as follows:

@Entry
@Component
struct PanGestureExample {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right });
  private currentRecognizer: GestureRecognizer = new GestureRecognizer();
  @State flag: boolean = true;

  aboutToAppear(): void {
    // The component will be hidden after 4 seconds.
    setTimeout(() => {
      this.flag = false;
      // Set the enabled state of the current gesture recognizer
      this.currentRecognizer.setEnabled(false);
    }, 4000);
  }

  build() {
    Column() {
      Text(`offsetX: ${this.offsetX}`)
        .margin(16);
      Column() {
        // ...
      }
      .margin({ left: 16 })
      .height(200)
      .width(300)
      .border({ width: 3 })
      .id('column')
      .visibility(this.flag? Visibility.Visible : Visibility.None)
      // Move with the top-left corner of the component as the coordinate origin
      .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
      .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer,
        others: Array<GestureRecognizer>) => {
        if (current) {
          let target = current.getEventTargetInfo();
          if (target) {
            // Find the component recognizer that needs to be controlled by component ID and gesture type
            if (target.getId() === 'column' &&
              current.getType() === GestureControl.GestureType.PAN_GESTURE) {
              // Save the identifier of the current component.
              this.currentRecognizer = current;
            }
          }
        }
        console.info('event-', event, others);
        return GestureJudgeResult.CONTINUE;
      })
      // Drag left or right to trigger the gesture event.
      .gesture(
        PanGesture(this.panOption)
          .onActionStart((event: GestureEvent) => {
            if (event) {
            }
          })
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              // Implement the drag-and-drop effect.
              this.offsetX = this.positionX + event.offsetX;
              this.offsetY = this.positionY + event.offsetY;
            }
          })
          .onActionEnd((event: GestureEvent) => {
            if (event) {
              this.positionX = this.offsetX;
              this.positionY = this.offsetY;
            }
          })
      );
    }
    .alignItems(HorizontalAlign.Start);
  }
}

After the component disappears, finger swiping will no longer trigger the component's gesture events.

Verification Result

The implementation effect is as follows:

FAQs

Q: How to intercept web gestures?
A: You can replace the inner Scroller container with the Web container by referring to Example in the gesture interception enhancement document. In this way, web gestures can be intercepted.

Written by Bunyamin Akcay

Error occurred during initialization of the speech recognition engine

HarmonyOS — Tue, 07 Jul 2026 01:27:00 +0000

Read the original article：Error occurred during initialization of the speech recognition engine

Problem Description

When developing the speech recognition feature, developers often encounter the following errors when creating and initializing the SpeechRecognitionEngine instance. How can this be resolved?

Asr CreateEngineParams is wrong.
Error message: Cannot read property 'createEngine' of undefined.
errCode: 1002200001, errMessage: create param is error, language only support zh-CN now.
errCode: 1002200001, errMessage: asr engine init failed with other process has initialized.

Background Knowledge

Speech recognition technology is widely applied, for example, to provide audio-to-text capabilities for hearing-impaired users or situations where it is inconvenient to listen to audio, even when the device is offline. HarmonyOS provides the speechRecognizer capability, which can convert a piece of Chinese audio information (Chinese, English in a Chinese context; short audio mode no longer than 60s, long audio mode no longer than 8 hours) into text. The audio can be in PCM audio file format or real-time speech. For more details, refer to the official website. The corresponding API to create and initialize the engine is speechRecognizer.createEngine.

Troubleshooting Process

Asr CreateEngineParams is wrong. There are multiple SpeechRecognitionEngine instances on the testing device.
Error message: Cannot read property 'createEngine' of undefined. The error occurs because the current debugging device may not support the feature.

By checking the error message and error codes, you can try to refer to the Core Speech Kit error codes to locate the issue.

Error code 1002200001:
- errMessage: create param is error, language only support zh-CN now. This indicates the creation parameters are wrong, as the language currently only supports "zh-CN".
- errMessage: asr engine init failed with other process has initialized. The ASR engine initialization failed because another process has already initialized it.

Analysis Conclusion

Asr CreateEngineParams is wrong. There are multiple SpeechRecognitionEngine instances on the testing device, possibly because resources were not released promptly after creating the instance, resulting in an error when trying to create it again.
Error message: Cannot read property 'createEngine' of undefined. This error occurs when using the emulator for speech recognition debugging. The official documentation specifies that this feature currently does not support the emulator. Refer to the speech recognition constraints and limitations.
Error code 1002200001:
- errMessage: create param is error, language only support zh-CN now. The parameters for speechRecognizer.createEngine CreateEngineParams in the official documentation specify that the language currently only supports "zh-CN" (Chinese).
- errMessage: asr engine init failed with other process has initialized. This error means that another instance or process is using the same resources or configurations to initialize the ASR engine at the same time or in the same environment, leading to a failure in engine creation.

Solution

For the "Asr CreateEngineParams is wrong" error, to ensure there are no multiple instances on the current device, it is important to release resources promptly after use. Below is a suggested code implementation:

  // Define the engine object
  let asrEngine: speechRecognizer.SpeechRecognitionEngine;
  // Define the listener callback object
  let listener: speechRecognizer.RecognitionListener = {
    onStart(sessionId: string, eventMessage: string) {},
    onEvent(sessionId: string, eventCode: number, eventMessage: string) {},
    onResult(sessionId: string, result: speechRecognizer.SpeechRecognitionResult) {},
    onComplete(sessionId: string, eventMessage: string) {
      asrEngine.shutdown();   // Release resources after recognition is complete to ensure the engine can be created again next time
      console.info(`onComplete, sessionId: ${sessionId} eventMessage: ${eventMessage}`);
    },
    onError(sessionId: string, errorCode: number, errorMessage: string) {},
  }

  // Create the speech recognition instance
  speechRecognizer.createEngine(initParamsInfo).then((speechRecognitionEngine: speechRecognizer.SpeechRecognitionEngine) => {
    // Receive the engine instance
    asrEngine = speechRecognitionEngine;
    console.info(`Succeeded in creating engine, result: ${JSON.stringify(asrEngine)}.`);

    // Set the listener
    asrEngine.setListener(listener);

    // Start listening
    asrEngine.startListening({
      sessionId: 'xxx',   // The sessionId must be shorter than 64 characters and cannot contain special characters like '.'
      audioInfo: {
        audioType: 'pcm',
        sampleRate: 16000,
        soundChannel: 1,
        sampleBit: 16,
      }
    });
  }).catch((err: BusinessError) => {
    console.error(`Failed to create engine. Code: ${err.code}, message: ${err.message}.`);
  });

The speechRecognizer capability does not support emulator debugging, so switch to physical device debugging.
The language parameter in the CreateEngineParams when calling speechRecognizer.createEngine should be changed to "zh-CN".

When implementing speech recognition capabilities, if errors occur while creating and initializing the engine through speechRecognizer.createEngine, check the CreateEngineParams, the current debugging device, and whether there are multiple instances running to resolve the issue.

Written by Bunyamin Akcay

Active invocation of the soft keyboard and soft keyboard avoidance in web scenarios

HarmonyOS — Mon, 06 Jul 2026 01:31:00 +0000

Read the original article：Active invocation of the soft keyboard and soft keyboard avoidance in web scenarios

Requirement Description

In the development process of HarmonyOS Web, it is inevitable to handle the issues of soft keyboard invocation and avoidance. In the Web domain, there are two relatively unique scenarios regarding the soft keyboard — proactively invoking the keyboard upon entering a page and keyboard avoidance for H5 pages. This article mainly provides reference implementations and solutions for these two specific cases.

Background Knowledge

Frontend page invoking application-side functions:

The Web component can be used to register application-side code into the frontend page. After registration, the frontend can invoke application-side functions using the registered object name, enabling frontend-to-application communication.

expandSafeArea Development Documentation:

By setting the safe area type to SafeAreaType.KEYBOARD, components can extend their safe area accordingly. Note that this property will not take effect if the parent container is a scrollable container.

Soft Keyboard Avoidance Development Documentation:

This allows implementation of custom soft keyboard avoidance modes. However, note that this interface is ineffective when the UIContext’s keyboard avoidance mode is set to KeyboardAvoidMode.RESIZE.

@ohos.inputMethod (Input Method Framework):

This module mainly serves foreground applications (such as Notes, Messages, Settings, and third-party apps) to control and manage input methods, including showing/hiding the keyboard, switching input methods, retrieving the list of available input methods, and more.

Implementation Steps

This article analyzes two frequently encountered scenarios — proactive soft keyboard invocation on H5 pages and keyboard avoidance in H5 interfaces — and provides corresponding reference implementations.

Proactive keyboard invocation when an input field exists on an H5 page:

You can use the Web component’s onPageEnd() callback in conjunction with the @ohos.inputMethod framework’s showTextInput() method to automatically focus the input box and invoke the keyboard once the page loads. The inputMethod.TextConfig can configure keyboard input field styles, and the attach() method binds the custom-drawn control to the input method.

Keyboard avoidance for H5 pages:

There are four main approaches, each with different effects:

Method 1: Set the Web component’s property layoutWeight(1). This defines how much space the component occupies in the parent container’s main axis direction, adapting to fill remaining space dynamically.

  Web({
        src: $rawfile('index.html'),
        controller: this.controller,
      })
        .domStorageAccess(true)
        .height('100%')
        .backgroundColor(Color.Yellow)
        .layoutWeight(1)
    }

Method 2: Set the safe area type. You can achieve keyboard avoidance by configuring the Web component with expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]).

  Web({
        src: $rawfile('index.html'),
        controller: this.controller,
      })
        .domStorageAccess(true)
        .height('100%')
        .backgroundColor(Color.Yellow)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
  }

Method 3: In EntryAbility.ets, use setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE) in onWindowStageCreate to compress the page size by the keyboard’s height when the keyboard is raised.

  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err) => {
      windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
    });
  }

Method 4: Modify the keyboard avoidance mode by setting the Web component’s property keyboardAvoidMode(WebKeyboardAvoidMode.RESIZE_VISUAL) to adjust the visible area dynamically when the keyboard appears.

  Web({
        src: $rawfile('index.html'),
        controller: this.controller,
      })
        .domStorageAccess(true)
        .height('100%')
        .backgroundColor(Color.Yellow)
        .keyboardAvoidMode(WebKeyboardAvoidMode.RESIZE_VISUAL)

Code Snippet

App-side code:

  import { webview } from '@kit.ArkWeb';
  import { inputMethod } from '@kit.IMEKit';
  import { BusinessError } from '@kit.BasicServicesKit';

  let inputMethodController = inputMethod.getController();
  @Entry
  @Component
  struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();
    aboutToAppear(): void {
      webview.WebviewController.setWebDebuggingAccess(true)
      try {
        let textConfig: inputMethod.TextConfig = {
          inputAttribute: {
            textInputType: 0,
            enterKeyType: 1
          }
        };
        inputMethodController.attach(true, textConfig, (err: BusinessError) => {
          if (err) {
            console.error(`Failed to attach: ${err.code} ${err.message}`);
            return;
          }
          console.info('Succeeded in attaching the inputMethod.');
        });
      } catch(err) {
        console.error(`Failed to attach: ${err.code} ${err.message}`);
      }
    }
    build() {
      Scroll() {
        Column() {
          Web({
            src: $rawfile('demo.html'),
            controller: this.controller,
          })
            .onPageEnd(() => {
              inputMethodController.showTextInput().then(() => {
                console.info('Succeeded in showing text input.');
              }).catch((err: BusinessError) => {
                console.error(`Failed to showTextInput: ${err.code} ${err.message}}`);
              });
            })
            .domStorageAccess(true)
            .height('100%')
        }
      }
    }
  }

HTML code:

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  <body>
  <h1>H5 Side</h1>
  <div>
      <input id="myInput" type="text" value="" style="margin:10px 0" onload/><br/>
  </div>
  </body>
  <script>
      function test(){
            document.getElementById("myInput").focus();
         }
      // Execute immediately when the document is loaded
      document.addEventListener('DOMContentLoaded', test);
  </script>
  </html>
  <style>
      body{
          width:100%;
          height:auto;
          margin:50px auto;
          text-align:center;
      }
  </style>

Limitations or Considerations

This sample supports API Version 19 Release and above.

This sample supports HarmonyOS 5.1.1 Release SDK and above.

Compilation and execution require DevEco Studio 5.1.1 Release or later.

Written by Bunyamin Akcay

VoIP Call Manager not available in wearable devices: Configure syscap.json

HarmonyOS — Mon, 06 Jul 2026 01:27:00 +0000

Read the original article：VoIP Call Manager not available in wearable devices: Configure syscap.json

Context

When using the voipCall module from @kit.CallServiceKit on wearable devices, the system does not include SystemCapability.Telephony.VoipCallManager by default. If a syscap.json file is not configured, this leads to a build-time error indicating the missing capability.

Description

When the following import is used in a wearable project:

import { voipCall } from '@kit.CallServiceKit';

The build process throws the following error:

The default system capabilities of devices wearable do not include SystemCapability.Telephony.VoipCallManager. Configure the capabilities in syscap.json. <ArkTSCheck>

This occurs because wearable devices do not enable the VoIP Call Manager capability by default.

Solution / Approach

To resolve this issue, create a syscap.json file under the main directory of the project and add the following configuration:

{
  "devices": {
    "general": [
      "wearable"
    ]
  },
  "development": {
    "addedSysCaps": [
      "SystemCapability.Telephony.VoipCallManager"
    ]
  }
}

This configuration explicitly enables the SystemCapability.Telephony.VoipCallManager capability for wearable devices.

Key Takeaways

Wearable devices do not support SystemCapability.Telephony.VoipCallManager by default.
Using voipCall requires explicitly declaring this capability in syscap.json.
The syscap.json file must be placed under the main directory of the project.

Additional Resources

https://developer.huawei.com/consumer/en/doc/harmonyos-references/syscap

Written by Baris Tuzemen

Common errors occur when the app commissioning assistant installs the hap package.

HarmonyOS — Mon, 06 Jul 2026 01:25:00 +0000

Read the original article：Common errors occur when the app commissioning assistant installs the hap package

Question

What are the common errors that occur when using the App Commissioning Assistant to install a HAP package on a sports watch, and how can they be resolved?

Short Answer

Common installation failures include configuration file errors, signature verification issues, invalid SDK versions, and internal errors. Each can be resolved by correcting configuration values, verifying signature settings, adjusting SDK compatibility, or optimizing JS page size.

Applicable Scenarios

These errors and solutions apply when developers use the App Commissioning Assistant to install applications on sports watches during testing or deployment.

1. Error Code 40 — Configuration File Format Incorrect

Cause:
Improper configuration in the config.json file.

Solutions:

Check parameters like compileSdkVersion.
Ensure the "label" string (e.g., "$string:squarewatch_MainAbility") and label text are no longer than 22 characters.
Verify the app icon size — recommended dimensions are 80 × 80 or 114 × 114 pixels.

2. Error Code 31 — Signature Verification Error

Cause:
Signature or UDID configuration issues.

Solutions:

Confirm the watch’s UDID is included in the signature file.
Ensure no more than 10 UDIDs are added.
Verify that the signature certificate has not expired.

3. Invalid `app.apiVersion` Field in Configuration File

Cause:
Incompatible SDK version settings.

Example of Incorrect Configuration:

compileSdkVersion 6
defaultConfig {
  compatibleSdkVersion 6
}
Copy codeCopy code

Solution:
Lower the compatibleSdkVersion to match the supported environment.

Correct Configuration:

compileSdkVersion 6
defaultConfig {
  compatibleSdkVersion 3
}

4. Error Code 34 — Internal Error

Cause:
Excessive size of JavaScript files.

Solution:
If a single JS page exceeds 48 KB, reduce its size by splitting components or optimizing code.

DEV Community: HarmonyOS

Enabling .bin File Sharing on HarmonyOS with Custom UTDs and Skills (Fix ‘No Available App to Open’)

Enabling .bin File Sharing on HarmonyOS with Custom UTDs and Skills (Fix ‘No Available App to Open’)

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet

Test Results

Limitations or Considerations

Related Documents or Links

Written by Bunyamin Eymen Alagoz

How to use layoutWeight for child element size weighting in a container?

Problem Description

Background Knowledge

Solution

Verification Result

FAQs

Written by Bunyamin Akcay

RichEditor sets content to adapt to width automatically

Background Knowledge

Implementation Steps

Code Snippet

Test Results

Limitations or Considerations

Written by Bunyamin Akcay

How to Solve the Problem of List Not Scrolling After Refreshing Data in LazyForEach

Problem Description

Background Knowledge

Troubleshooting Process

Analysis Conclusion

Solution

Verification Result

Written by Bunyamin Akcay

How to Implement Chat List Functionality Using the List Component

How to Implement Chat List Functionality Using the List Component

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Written by Bunyamin Akcay

How to disable the default animation when using removeByName to delete pages in Navigation?

Problem Description

Background Knowledge

Solution

Verification Result

Written by Bunyamin Akcay

How to Center Grid Component Items Vertically

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Written by Bunyamin Akcay

How Do I Resolve the Problem that the Swipe Gestures Can Be Triggered After the Widget Disappears?

Problem Description

Background Knowledge

Solution

Verification Result

FAQs

Written by Bunyamin Akcay

Error occurred during initialization of the speech recognition engine

Problem Description

Background Knowledge

Troubleshooting Process

Analysis Conclusion

Solution

Written by Bunyamin Akcay

Active invocation of the soft keyboard and soft keyboard avoidance in web scenarios

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet

Limitations or Considerations

Written by Bunyamin Akcay

VoIP Call Manager not available in wearable devices: Configure syscap.json

Context

Description

3. Invalid `app.apiVersion` Field in Configuration File