pink box error while i try to perform action in tempo

Before we can get to the root of the issue, note your form buttons parameter is inside of your contents parameter, it should be at the same level under a!formLayout instead.  Update your interface to the code below and go from there.

Additionally, when posting code snippets on the community, please use "Insert -> Code" for readability.

a!localVariables(
  local!clientdetails: a!refreshVariable(
    value: cast(typeof('type!{urn:com:appian:types}CH_Clients'()),rule!CH_query_getDetails(sid:ri!sid)),
    refreshOnReferencedVarChange: false,
  ),
  a!formLayout(
    label: "Form",
    contents: {
      a!integerField(
        label: "cid",
        labelPosition: "ABOVE",
        value: property(local!clientdetails,"cid",{}),
        saveInto: local!clientdetails.cid,
        readOnly: ri!readonly
      ),
      a!textField(
        label: "cname",
        labelPosition: "ABOVE",
        readOnly: ri!readonly,
        value: property(local!clientdetails,"cname",{}),
        saveInto: local!clientdetails.cname
      )

    },
    buttons: a!buttonLayout(
      showWhen: not(ri!readonly="false"),
      primaryButtons: {
        a!buttonWidget(
          label: "Submit",
          submit: true,
          style: "PRIMARY",
          value: "submit",
          saveInto: {
            ri!buttonvalue,
            a!save(ri!CH_Clients,local!clientdetails)
          }
        )
      },
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: "submit", /* You may want a different value here than your submit button above */
          saveInto: ri!buttonvalue,
          submit: true,
          style: "NORMAL"

        )
      }
    )
  )
)