HarmonyOS 5 Developer's Guide: A Perfect Combination of Sharing Features and Status Algorithms

Read the original article：HarmonyOS 5 Developer's Guide: A Perfect Combination of Sharing Features and Status Algorithms

Preface
Feature Demonstration
Core Feature 1: Custom Text Sharing
- Technical Background
- Detailed Implementation Steps
  - 1. Importing Required Kits and Dependencies
  - 2. Defining Data Type APIs
  - 3. Creating Mock Data
  - 4. Core Sharing Function Implementation
  - 5. UI Interaction Implementation
  - 6. Data Processing and Formatting
  - 7. Utility Methods Implementation
Core Feature 2: Status Calculation Based o...

Read the original article：HarmonyOS 5 Developer's Guide: A Perfect Combination of Sharing Features and Status Algorithms

Preface
Feature Demonstration
Core Feature 1: Custom Text Sharing
- Technical Background
- Detailed Implementation Steps
  - 1. Importing Required Kits and Dependencies
  - 2. Defining Data Type APIs
  - 3. Creating Mock Data
  - 4. Core Sharing Function Implementation
  - 5. UI Interaction Implementation
  - 6. Data Processing and Formatting
  - 7. Utility Methods Implementation
Core Feature 2: Status Calculation Based on Time
- Feature Background
- Core Algorithm Implementation
- Status Styling System
Complete Code Implementation
- Extended Use Cases
Conclusion

Preface

Hello everyone, I am Ruocheng. Welcome to the HarmonyOS 5 Practical Development Series. This series aims to provide developers with hands-on technical solutions and ready-to-use code samples to help you quickly master core HarmonyOS app development skills.

In this article, we will take an in-depth look at how to implement custom text sharing in your app, as well as how to calculate and display dynamic statuses based on time in standalone apps. These two features are particularly practical for content-based and utility-type apps, offering a wide range of real-world use cases.

Feature Demonstration

As shown below, the four screenshots illustrate:

Share Pop-up Interface - The system's native share selector
Share to Notes - Selecting a target app for sharing
View in Notes - Display of shared content in the target app
Time-based Status Evaluation - Dynamic status display calculated from time differences

Core Feature 1: Custom Text Sharing

Technical Background

In HarmonyOS 5, the system provides a powerful ShareKit, enabling apps to share content with other apps. Compared with traditional copy-and-paste operations, the system's sharing feature offers several advantages:

Enhanced user experience：A native, smooth-sharing interface
Rich content formats：Supports text, images, files, and more
Smart target recommendations： Automatically recommends suitable apps for sharing
Privacy security：Sharing is mediated through the system to safeguard user data

Detailed Implementation Steps

Importing Required Kits and Dependencies

import { SolarTerm } from '../Utils/Type'
import { SolarTerms } from '../Utils/SolarTerms'
import promptAction from '@ohos.promptAction'
Import { systemShare } from '@kit.ShareKit';           // System sharing capability
Import { uniformTypeDescriptor as utd } from '@kit.ArkData';  // Unified data type description
Import { common } from '@kit.AbilityKit';              // App context capability
Import { BusinessError } from '@kit.BasicServicesKit'; // Business error handling

Code explanation:

@kit.ShareKit：Provides system-level sharing capabilities
@kit.ArkData：Defines data types to ensure proper sharing of content format
@kit.AbilityKit：Gets app context, which is required for sharing operations
@kit.BasicServicesKit：Processes potential errors during sharing

Defining Data Type APIs

Create the file Utils/Type.ets:

export interface SolarTerm {
    /** Solar term name */
    name: string;
/** Solar term date (Gregorian calendar) */
date: string;

/** Solar term status (such as "Passed", "Today", "Upcoming") */
status: string;

/** Lunar date description */
lunar_date: string;

/** Solar term source text */
source_text: string;

/** Local icon path */
local_icon_path: string;

/** Solar term description */
description: string;

}

Design description:

TypeScript APIs ensure data type safety.
Each field includes clear comments explaining its purpose.
Structured design facilitates future expansion and maintenance.

Creating Mock Data

Create the file Utils/SolarTerms.ets (partial sample shown below):

import {SolarTerm} from "./Type"
export const SolarTerms: SolarTerm[] = [
{
“name”: “Minor Cold”,
“date”: “2025-01-05”,
“status”: “Passed”,
“lunar_date”: “[Gregorian calendar January 5, 6, or 7]”,
“source_text”: “Winter\nhas passed\nMinor Cold\n2025-01-05\n[Gregorian calendar January 5, 6, or 7]”,
“local_icon_path”: “iconsSolar/XH.png”,
“description”: “Minor Cold is the 23rd solar term of the 24 Solar Terms and the fifth in winter…”
},
{
“name”: “Great Cold”,
“date”: “2025-01-20”,
“status”: “Passed”,
“lunar_date”: “[Gregorian calendar January 19, 20, or 21]”,
“source_text”: “Winter\nhas passed\nGreat Cold\n2025-01-20\n[Gregorian calendar January 19, 20, or 21]”,
“local_icon_path”: “iconsSolar/DH.png”,
“description”: “Great Cold is the final solar term among the 24 Solar Terms…”
}
// … More data
]

Core Sharing Function Implementation

@State currentSolarTerm: SolarTerm | null = null // The currently selected solar term information
/**


System sharing function


@param title Sharing title


@param content Sharing content


@param description Sharing description
*/
private async share(title: string, content: string, description: string) {
try {
// Create a sharing data object
let shareData: systemShare.SharedData = new systemShare.SharedData({
utd: utd.UniformDataType.TEXT,  // Specify the data type as text
content: content,               // Main sharing content
title: title,                   // Sharing title
description: description,       // Sharing description
thumbnail: new Uint8Array()     // Thumbnail (optional)
});
     // Create a sharing controller
 let controller: systemShare.ShareController = new systemShare.ShareController(shareData);

 // Get the UI context and app context
 const uiContext: UIContext = this.getUIContext();
 const context: common.UIAbilityContext = uiContext.getHostContext() as common.UIAbilityContext;

 // Display the sharing interface
 await controller.show(context, {
     selectionMode: systemShare.SelectionMode.SINGLE,      // Single selection mode
     previewMode: systemShare.SharePreviewMode.DEFAULT,    // Default preview mode
 });

 console.log('Sharing succeeded');

} catch (error: BusinessError) {
console.error(‘Sharing failed:’, error);
promptAction.showToast({
message: ‘Sharing failed, please try again’,
duration: 2000
});
}
}

Technical highlights:

Data type specification：Use utd.UniformDataType.TEXT to clearly define the shared content as text type
Context retrieval：Get necessary contexts through getUIContext() and getHostContext()
Sharing mode configuration：
- SelectionMode.SINGLE：Allows users to select only one target app
- SharePreviewMode.DEFAULT：Uses the system's default preview style
Error handling：Capture exceptions with try-catch and provide user-friendly error messages

UI Interaction Implementation

Button() {
    Text('🔗')
        .fontSize(20)
}
.width(44)
.height(44)
.borderRadius(22)
.backgroundColor('#FFFFFF')
.shadow({
    radius: 8,
    color: '#00000015',
    offsetY: 2
})
.onClick(() => {
    this.shareSolarTerm()  // Call the sharing process function
})

UI design description:：

Use a circular button design to provide better visual aesthetics.
Add shadow effects to enhance dimensionality.
Use the Emoji icon to provide a clean and intuitive user experience.

Data Processing and Formatting

/**
 * Core process function for sharing solar term information
 */
private shareSolarTerm() {
    const solarTerm = this.currentSolarTerm!
// Get season information and corresponding emoji
const season = this.getSeason()
const seasonEmoji = this.getSeasonEmoji()

// Process description text to prevent excessive length
const shortDescription = solarTerm.description.length &gt; 100
    ? solarTerm.description.substring(0, 100) + '...'
    : solarTerm.description

// Build the sharing title
const title = `🌟 ${solarTerm.name} ${seasonEmoji}`

// Build the sharing content (format with template strings)
const content = `

📅 Solar term time: ${solarTerm.date}
🗓️ Lunar date: ${solarTerm.lunar_date}
🌸 Season: ${season}
📖 Introduction to solar term:
${shortDescription}
🎯 Characteristics of solar term:
• This is an important node among the 24 Solar Terms.
• It marks a significant moment in the ${season} season.
• It reflects the profound understanding of natural rhythms in Chinese culture.
🏮 National Almanac – Inheriting Chinese culture, exploring solar term wisdom.
#24 Solar Terms #${solarTerm.name} #Chinese culture #Traditional solar term`
const description = `Solar Term Knowledge Sharing`

// Execute sharing
this.share(title, content, description)

// Display a success toast
promptAction.showToast({
    message: `Shared ${solarTerm.name} solar term information`,
    duration: 2000
})

}

Content formatting tips:

Structured layout：Enhance readability using emoji and symbols
Length control：Truncate long description texts to maintain concise content
Tagging：Add hashtags for social media visibility
Branding：Include app name or slogan to strengthen brand awareness

Utility Methods Implementation

/**
 * Get the season based on the solar term name
 */
private getSeason(): string {
    const name = this.currentSolarTerm!.name
    const springTerms = ['Beginning of Spring', 'Rain Water', 'Awakening of Insects', 'Spring Equinox', 'Clear and Bright', 'Grain Rain']
    const summerTerms = ['Beginning of Summer', 'Grain Full', 'Grain in Ear', 'Summer Solstice', 'Minor Heat', 'Major Heat']
    const autumnTerms = ['Beginning of Autumn', 'End of Heat', 'White Dew', 'Autumnal Equinox', 'Cold Dew', 'Frost Descent']
    const winterTerms = ['Beginning of Winter', 'Minor Snow', 'Major Snow', 'Winter Solstice', 'Minor Cold', 'Great Cold']
if (springTerms.includes(name)) return 'Spring'
if (summerTerms.includes(name)) return 'Summer'
if (autumnTerms.includes(name)) return 'Autumn'
if (winterTerms.includes(name)) return 'Winter'
return 'Unknown'

}
/**

Get the emoji corresponding to the season
*/
private getSeasonEmoji(): string {
const season = this.getSeason()
switch (season) {
case ‘Spring’: return ‘🌸’
case ‘Summer’: return ‘☀️’
case ‘Autumn’: return ‘🍂’
case ‘Winter’: return ‘❄️’
default: return ‘🌍’
}
}

Core Feature 2: Status Calculation Based on Time

Feature Background

In many use cases, it is necessary to display different statuses based on the relationship between the current time and a target time. For example:

Event status: Not started, In progress, Ended
Task status: Pending, Processing, Completed
Time nodes: Upcoming, Ongoing, Passed

Core Algorithm Implementation

As shown in the original diagram, the date field in the data represents the target time, while the current time serves as the reference.

/**
 * Core algorithm for calculating the solar term status
 * @param solarTerm Solar term data object
 * @returns Status string
 */
private calculateSolarTermStatus(solarTerm: SolarTerm): string {
    const today = new Date()
    const solarTermDate = new Date(solarTerm.date)
// Reset time to 00:00 to compare only the date portion
// This can avoid the influence of hours, minutes, and seconds on the comparison results.
today.setHours(0, 0, 0, 0)
solarTermDate.setHours(0, 0, 0, 0)

// Calculate the time difference (milliseconds)
const timeDiff = today.getTime() - solarTermDate.getTime()
// Convert to day difference
const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))

// Return different statuses based on the day difference
if (daysDiff &gt; 0) {
    // The target date has passed.
    return 'Passed'
} else if (daysDiff === 0) {
    // The target date is today.
    return 'Today'
} else {
    // The target date is in the future.
    const daysUntil = Math.abs(daysDiff)

    if (daysUntil &lt;= 7) {
        // Within one week: display the number of days remaining
        return `${daysUntil} days later`
    } else if (daysUntil &lt;= 30) {
        // Within one month: display the number of weeks remaining
        return `${Math.ceil(daysUntil / 7)} weeks later`
    } else {
        // More than one month away: display "Upcoming"
        return 'Upcoming'
    }
}

}

Algorithm design highlights:：

Time normalization：Reset time to 00:00 to compare only the date portion
Millisecond conversion：Use getTime() to get timestamps for precise calculation
Tiered display：Display days, weeks, or a general status depending on time distance
User-friendly output：Provide intuitive status descriptions

Status Styling System

To make the status display more intuitive, different color schemes are applied for each status:

/**
 * Get text color based on status
 */
private getStatusColor(): string {
    const status = this.getCurrentStatus()
    if (status === 'Passed') {
        return '#E74C3C'        // Red: expired
    } else if (status === 'Today') {
        return '#F39C12'        // Orange: in progress
    } else if (status.includes('days later') || status.includes('weeks later')) {
        return '#3498DB'        // Blue: upcoming
    } else {
        return '#27AE60'        // Green: future
    }
}
/**

Get background color based on status
*/
private getStatusBgColor(): string {
const status = this.getCurrentStatus()
if (status === ‘Passed’) {
return ‘#FADBD8’        // Light red background
} else if (status === ‘Today’) {
return ‘#FEF9E7’        // Light orange background
} else if (status.includes(‘days later’) || status.includes(‘weeks later’)) {
return ‘#EBF3FD’        // Light blue background
} else {
return ‘#D5F4E6’        // Light green background
}
}

Color design principles:

Semantic coloring：Each status uses a distinct color tone
Moderate contrast：Ensure text readability
Visual hierarchy：Reflect importance through color brightness and saturation

Complete Code Implementation

The following example integrates both core features into a complete implementation:

import { SolarTerm } from '../utils/types'
import { SolarTerms } from '../utils/SolarTerms'
import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
import { systemShare } from '@kit.ShareKit';
import { uniformTypeDescriptor as utd } from '@kit.ArkData';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct SolarTermsDetail {
@State currentSolarTerm: SolarTerm = {
“name”: “Minor Cold”,
“date”: “2025-01-05”,
“status”: “Passed”,
“lunar_date”: “[Gregorian calendar January 5, 6, or 7]”,
“source_text”: “Winter\nhas passed\nMinor Cold\n2025-01-05\n[Gregorian calendar January 5, 6, or 7]”,
“local_icon_path”: “iconsSolar/XH.png”,
“description”: “Minor Cold is the 23rd solar term of the 24 Solar Terms and the fifth in winter. The Big Dipper points to Zi; the solar longitude is 285°; it occurs from January 5–7 in the Gregorian calendar. Minor Cold marks the official beginning of midwinter. Cold accumulates over time, so Minor Cold indicates that the weather is cold but not yet at its extreme. Like Great Cold, Minor Heat, Major Heat, and End of Heat, it is a solar term that reflects temperature changes. The weather characteristics of Minor Cold are: gradually cold, but not extremely cold. As the saying goes, ‘the cold is in the three nines,’ since the ‘three nines’ of midwinter generally fall within this solar term, there is a saying, ‘Minor Cold is colder than Great Cold.’ \nAccording to Chinese meteorological data, Minor Cold is usually the coldest solar term, and only in a few years does Great Cold have lower temperatures than Minor Cold. During Minor Cold, most regions of China enter a severe cold period, with frozen soil and rivers, while cold air continuously moves south from the north, creating harsh weather known as ‘The coldest period of winter’. In southern China, although the cold is not as severe as in the north, temperatures drop noticeably. The coldest periods in the south are between Minor Cold and the solar terms Rain Water and Awakening of Insects. Minor Cold is dry and cold, while after Rain Water, the cold becomes wet.
}
/**
 * System share feature implementation
 */
private async share(title: string, content: string, description: string) {
    try {
        let shareData: systemShare.SharedData = new systemShare.SharedData({
            utd: utd.UniformDataType.TEXT,
            content: content,
            title: title,
            description: description,
            thumbnail: new Uint8Array()
        });

        let controller: systemShare.ShareController = new systemShare.ShareController(shareData);
        const uiContext: UIContext = this.getUIContext();
        const context: common.UIAbilityContext = uiContext.getHostContext() as common.UIAbilityContext;

        await controller.show(context, {
            selectionMode: systemShare.SelectionMode.SINGLE,
            previewMode: systemShare.SharePreviewMode.DEFAULT,
        });
    } catch (error: BusinessError) {
    console.error('Sharing failed:', error);
    }
}

build() {
    Column({ space: 20 }) {
        // Share button
        Button(`Share ${this.currentSolarTerm? .name} Solar term`)
            .width(200)
            .height(44)
            .backgroundColor('#007AFF')
            .borderRadius(22)
            .onClick(() =&gt; {
                this.shareSolarTerm()
            })

        // Status display
        Text(this.calculateSolarTermStatus(this.currentSolarTerm!))
            .fontSize(14)
            .fontColor(this.getStatusColor())
            .backgroundColor(this.getStatusBgColor())
            .padding({ left: 12, right: 12, top: 4, bottom: 4 })
            .borderRadius(12)
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .linearGradient({
        direction: GradientDirection.Bottom,
        colors: [['#E8F4FD', 0.0], ['#F8F9FA', 0.3], ['#FFFFFF', 1.0]]
    })
}

//  ===== ===== ===== ===== Utility Methods ===== ===== ===== =====

/**
 * Get the season of the solar term
 */
private getSeason(): string {
    const name = this.currentSolarTerm!.name
const springTerms = ['Beginning of Spring', 'Rain Water', 'Awakening of Insects', 'Spring Equinox', 'Clear and Bright', 'Grain Rain']
const summerTerms = ['Beginning of Summer', 'Grain Full', 'Grain in Ear', 'Summer Solstice', 'Minor Heat', 'Major Heat']
const autumnTerms = ['Beginning of Autumn', 'End of Heat', 'White Dew', 'Autumnal Equinox', 'Cold Dew', 'Frost Descent']
const winterTerms = ['Beginning of Winter', 'Minor Snow', 'Major Snow', 'Winter Solstice', 'Minor Cold', 'Great Cold']

    if (springTerms.includes(name)) return 'Spring'
    if (summerTerms.includes(name)) return 'Summer'
    if (autumnTerms.includes(name)) return 'Autumn'
    if (winterTerms.includes(name)) return 'Winter'
    return 'Unknown'
}

/**
 * Get the emoji corresponding to the season
 */
private getSeasonEmoji(): string {
    const season = this.getSeason()
    switch (season) {
        case 'Spring': return '🌸'
        case 'Summer': return '☀️'
        case 'Autumn': return '🍂'
        case 'Winter': return '❄️'
        default: return '🌍'
    }
}

/**
 * Calculate the solar term status
 */
private calculateSolarTermStatus(solarTerm: SolarTerm): string {
    const today = new Date()
    const solarTermDate = new Date(solarTerm.date)

    // Reset time to 00:00 to compare only the date
    today.setHours(0, 0, 0, 0)
    solarTermDate.setHours(0, 0, 0, 0)

    const timeDiff = today.getTime() - solarTermDate.getTime()
    const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))

    if (daysDiff &gt; 0) {
        return 'Passed'
    } else if (daysDiff === 0) {
        return 'Today'
    } else {
        const daysUntil = Math.abs(daysDiff)
        if (daysUntil &lt;= 7) {
        return `${daysUntil} days later`
        } else if (daysUntil &lt;= 30) {
        return `${Math.ceil(daysUntil / 7)} weeks later`
        } else {
        return 'Upcoming'
        }
    }
}

/**
 * Get the current calculated status
 */
private getCurrentStatus(): string {
    return this.calculateSolarTermStatus(this.currentSolarTerm!)
}

/**



Get text color based on status
*/
private getStatusColor(): string {
const status = this.getCurrentStatus()
if (status === ‘Passed’) {
return ‘#E74C3C’
} else if (status === ‘Today’) {
return ‘#F39C12’
} else if (status.includes(‘days later’) || status.includes(‘weeks later’)) {
return ‘#3498DB’
} else {
return ‘#27AE60’
}
}
/**


Get background color based on status
*/
private getStatusBgColor(): string {
const status = this.getCurrentStatus()
if (status === ‘Passed’) {
return ‘#FADBD8’
} else if (status === ‘Today’) {
return ‘#FEF9E7’
} else if (status.includes(‘days later’) || status.includes(‘weeks later’)) {
return ‘#EBF3FD’
} else {
return ‘#D5F4E6’
}
}
/**


Share solar term information
*/
private shareSolarTerm() {
const solarTerm = this.currentSolarTerm!
const status = this.calculateSolarTermStatus(solarTerm)
const season = this.getSeason()
const seasonEmoji = this.getSeasonEmoji()
// Get a short description (first 100 characters)
const shortDescription = solarTerm.description.length > 100
? solarTerm.description.substring(0, 100) + ‘…’
: solarTerm.description
const title = 🌟 ${solarTerm.name} ${seasonEmoji}
const content = `
📅 Solar term time: ${solarTerm.date}
🗓️ Lunar date: ${solarTerm.lunar_date}
⏰ Current status: ${status}
🌸 Season: ${season}




📖 Introduction to solar term:
${shortDescription}
🎯 Characteristics of solar term:
• This is an important node among the 24 Solar Terms.
• It marks a significant moment in the ${season} season.
• It reflects the profound understanding of natural rhythms in Chinese culture.
🏮 National Almanac – Inheriting Chinese culture, exploring solar term wisdom.
#24 Solar Terms #${solarTerm.name} #Chinese culture #Traditional solar term`
const description = `Solar Term Knowledge Sharing`

    this.share(title, content, description)
    promptAction.showToast({
        message: `Shared ${solarTerm.name} solar term information`,
        duration: 2000
    })
}

}

Extended Use Cases

These two features can be widely applied in the following use cases:：

Content-based apps：article sharing, knowledge dissemination
Utility-type apps：task management, schedule planning
Educational apps：study material sharing, progress tracking
Lifestyle apps：event reminders, status display

Conclusion

This article provides a detailed explanation of the implementation of custom text sharing and time status processing in HarmonyOS 5. By leveraging the system's ShareKit and precise time algorithms, we can offer users an excellent sharing experience and intuitive status display.

These technical solutions are not only applicable to solar term apps but can also be flexibly used in a variety of business use cases. We hope this article helps developers quickly master these practical skills and apply them effectively in real projects.

Contents