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.
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.showSecondaryButton(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¶
Last update: June 23, 2023