Skip to content

The Signature Form

Use the signature form to launch a SignatureCaptureFormCell. This view can be used inline and is intended to open a dialog on tablet and a full screen dialog on mobile whenever the user clicks the Add Signature button.

Signature Form

Using the Signature Form

This form can be inflated from signature_form.xml within your Activity and has a few customizable components:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val inflater = getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val container = findViewById<ViewGroup>(R.id.signature_form_container)
        val signatureForm = inflater.inflate(R.layout.signature_form, container)
        val keyTextView = signatureForm.findViewById<TextView>(R.id.key)
        keyTextView.text = "This is a key"
        val valueTextView = signatureForm.findViewById<TextView>(R.id.value)
        valueTextView.text = "This is a Value"
        signatureForm.findViewById<Button>(R.id.signature_add_btn).setOnClickListener(View.OnClickListener {
          val fm = supportFragmentManager
          val dialogFragment = MyDialogFragment.newInstance()
          if (!Utility.isTablet(applicationContext){
            dialogFragment.setStyle(DialogFragment.STYLE_NORMAL, R.style.Dialog_Mobile)
          }
          dialogFragment.show(fm, "signature_capture_dialog_layout")
        })
    }

Subclassing DialogFragment

Currently the SDK does not provide a DialogFragment containing SignatureCaptureFormCell out of the box but here is an example of how one might be implemented:

class SignatureCaptureDialogFragment : DialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout to use as dialog or embedded fragment
        val v = inflater.inflate(R.layout.signature_capture_dialog_layout, container, true)
        val signatureCapture: SignatureCaptureFormCell = v.findViewById(R.id.signature_capture)
        signatureCapture.footer.isSecondaryEnabled = false
        signatureCapture.footer.setPrimaryActionEmphasized(false)
        signatureCapture.setOnClearListener { signatureCapture.clearSignature() }
        signatureCapture.setBackgroundColor(resources.getColor(R.color.sap_ui_background_color, null))
        if (Utility.isTablet(requireContext())) {
            signatureCapture.setHorizontalMargin(88)
        }
        val toolbar: Toolbar = v.findViewById(R.id.toolbar)
        val closeIcon = resources.getDrawable(R.drawable.ic_close_24dp, requireContext().theme)
        toolbar.title = "Signature"
        toolbar.navigationIcon = closeIcon
        toolbar.setNavigationOnClickListener { dismiss() }
        toolbar.inflateMenu(R.menu.actionbar_submit)
        val menu = toolbar.menu
        menu.findItem(R.id.submit_menu_item).setOnMenuItemClickListener {
            dismiss()
            false
        }
        return v
    }

    override fun onStart() {
        super.onStart()
        val width = ViewGroup.LayoutParams.MATCH_PARENT
        val height = ViewGroup.LayoutParams.MATCH_PARENT
        if (!Utility.isTablet(requireContext())) {
            dialog!!.window!!.setLayout(width, height)
        } else {
            dialog!!.window!!.setLayout(1200, 1500)
        }
    }

    companion object {
        fun newInstance(): SignatureCaptureDialogFragment {
            return SignatureCaptureDialogFragment()
        }
    }
}

DialogFragment XML Layout

This is the layout that will contain a SignatureCaptureFormCell:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/signature_inline_dialog"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:titleTextColor="@color/FioriAppBarText"/>

    </com.google.android.material.appbar.AppBarLayout>

    <com.sap.cloud.mobile.fiori.formcell.SignatureCaptureFormCell
        android:id="@+id/signature_capture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:footerEnabled="true" />

</LinearLayout>

Result

Signature Form Demo


Last update: June 22, 2021