Skip to main content

Single Line Activity

This activity is used to capture a single line of text from the user, such as a first name, last name, or any simple textual input.

Inputs​

The SingleLineActivity expects the following input options:

  • Title (string): The title displayed at the top of the modal to indicate what information is being requested.
  • Description (string): A description providing additional context to the user about the input.
  • ButtonCancelText (string): The label for the button to cancel the activity.
  • ButtonOKText (string): The label for the button to confirm the input and proceed.
  • Placeholder (string): A placeholder text that appears in the text input box as a hint for the user.

Example Code​

singleLineActivity: async (data: SingleLineActivityOptions) => {
  console.log('Single Line Activity:', data);
  return new Promise<{ action: WorkflowActivityUserAction; result: string }>((resolve) => {
    RootNavigation.navigate('WorkflowActivityScreen', {
      type: 'singleLine',
      data,
      onReject: () => {
        console.log('Single Line Activity Rejected');
        resolve({
          action: WorkflowActivityUserAction.Cancel,
          result: '',
        });
      },
      onConfirm: (result: string) => {
        console.log('Single Line Activity result:', result);
        resolve({
          action: WorkflowActivityUserAction.OK,
          result,
        });
      },
    });
  });
}

Handling and Layout​

When the user navigates to the WorkflowActivityScreen for a SingleLineActivity, the layout contains the following components:

  1. Title: Displayed as the primary heading, guiding the user about the input being requested.
  2. Description: Displays more details or instructions to clarify the purpose of the requested input.
  3. Text Input: A single-line text field for entering the required information. It uses the title as a placeholder by default, but you can set it explicitly if needed.
  4. Action Buttons:
    • Cancel Button: This button allows the user to cancel the input operation, returning a Cancel action.
    • OK Button: When pressed, it submits the user’s input and returns an OK action.

Handling User Actions​

  • Confirming the Input: If the user presses the OK button, the inputted value is sent back through the onConfirm callback. This triggers the workflow to resolve the activity with an OK action and the provided input as the result.

  • Canceling the Input: If the user presses the Cancel button, it triggers the onReject callback. This marks the activity as canceled and returns a Cancel action with an empty result.

Output​

The output for a Single Line Activity is a string containing the text entered by the user. If the activity is confirmed, the resolved result will look like this:

{
  action: WorkflowActivityUserAction.OK,
  result: "User Input", // Example user input
}

If the activity is canceled, the resolved result will look like this:

{
  action: WorkflowActivityUserAction.Cancel,
  result: "",
}

Example Layout Code​

Here’s the layout and behavior of the Single Line Activity within the screen component:

<View style={styles.contentContainer}>
  <Text style={styles.subheading}>{toTitleCase(data.title)}</Text>
  <Text style={styles.modalText}>{data.description}</Text>
  <TextInput
    value={result}
    onChangeText={setResult}
    placeholder={data.title}
    style={styles.textInput}
  />
  <View style={styles.actionButtonsContainer}>
    <TouchableOpacity onPress={handleCancel} style={styles.button}>
      <Text style={styles.actionButtonText}>{data.buttonCancelText}</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={handleConfirm} style={styles.button}>
      <Text style={styles.actionButtonText}>{data.buttonOKText}</Text>
    </TouchableOpacity>
  </View>
</View>
X

Graph View