UOF2 客製欄位下拉選單 固定選項 從資料庫提供選項 | EIP | BPM | WebForm

by | 4 月 11, 2026 | 一等一UOF系統, 程式 | 0 comments

Views: 0

這篇教學下拉選單怎麼做，原本想把從資料庫讀取跟搜尋資料一起寫，不過我發覺寫太長了，這篇先以簡單的方式。

雖然我覺得固定選項用內建的就好啦，這篇可以學到怎麼做一個客製欄位的基本內容。

前往一等一科技UOF2 教學列表

準備工作

  • UOF2 開發環境，這篇教學使用的是28.5版
  • 外掛欄位產生器
  • Visual Studio ，這篇開始我使用的開發版本是 2026

產生客製欄位

如果你已經有客製欄位了這邊可以省略，這邊簡單講一下使用步驟

填入外掛蘭為代號，檔名等資訊

Image

依照需求填寫命名

Image

動作>匯出成外掛欄位，依照版本選擇

Image

  • plugIn.xml，選網站目錄App_Data下的plugIn.xml
  • 匯出外掛欄位，選網站目錄CDS底下的資料夾

Image

表單設計

這邊簡單我們設計一個DEMO下拉選單，做客製欄位有兩個重點，先設計簡單的流程自己簽就好，然後發佈表單。

Image

Image

Image

Image

在申請介面改Code

要做客製欄位的重點，一邊改Code 一邊改Code

Image

然後編輯對應的檔案

Image

寫下拉選單-固定資料(寫死的) 使用ASP.NET元件

我們先學簡單地的作法，資料直接固定選項

一般來說可以用ASP.Net內建dropdownlist的製作 官方說明

<!-- DropDownDemoUC.ascx -->
<asp:dropdownlist ID="ddlDiner" runat="server" AutoPostBack="true" >
    <asp:ListItem Text="請選擇" Value=""></asp:ListItem>
    <asp:ListItem Text="選項1" Value="1"></asp:ListItem>
    <asp:ListItem Text="選項2" Value="2"></asp:ListItem>
    <asp:ListItem Text="選項3" Value="3"></asp:ListItem>
</asp:dropdownlist>

假設這個選項是晚餐 ddl表示這是下拉選單，Diner表示這是晚餐。

看一下成果

Image

再來我們可以到表單申請>填寫我們的表單，看一下選項是不是如預期的，寫程式的一個技巧就是一邊寫一邊看成果。

Image

Image

處理存檔部分

這邊有個重要的技巧

我們會把選到的值跟文字分別儲存在畫面上的隱藏欄位

我們先補兩個隱藏欄位在DropDownDemoUC.ascx中

<asp:dropdownlist ID="ddlDiner" runat="server" AutoPostBack="true" >
    <asp:ListItem Text="請選擇" Value=""></asp:ListItem>
    <asp:ListItem Text="選項1" Value="1"></asp:ListItem>
    <asp:ListItem Text="選項2" Value="2"></asp:ListItem>
    <asp:ListItem Text="選項3" Value="3"></asp:ListItem>
</asp:dropdownlist>
<!-- 隱藏欄位用於存儲選擇的值和名稱 -->
<asp:hiddenfield ID="hidDiner" runat="server" />
<asp:hiddenfield ID="hidDiner_NAME" runat="server" />

將值存到hid欄位

這邊有兩個做法，比較簡單可以靠Webform內建的OnSelectedIndexChanged

事件，複雜一點則是靠js去更新hid內容，後者的使用者體感比較好，這邊兩個都教學，之後則一使用。

後端事件 OnSelectedIndexChanged

這邊有個技巧，輸入　OnSelectedIndexChanged　後，可以選Create method ，visual studio就會自動生成對應的函數在.ascx.cs當中

Image

Image

這個函數會在選項改變時被呼叫

接著我們在ddldinner_OnSelectedIndexChanged()函數中加上呼叫後要將值存入事件中

protected void ddlDiner_OnSelectedIndexChanged(object sender, EventArgs e)
{
    hidDiner.Value = ddlDiner.SelectedValue; //存值
    hidDiner_NAME.Value = ddlDiner.SelectedItem?.Text; //存選項文字
}

使用JS的處理存值的做法 onchange=””

<script>

    // 當下拉選單的值改變時，更新隱藏欄位的值和名稱
    function updateHiddenFields() {
        var ddlDiner = document.getElementById('<%= ddlDiner.ClientID %>');
        var selectedValue = ddlDiner.value;
        var selectedText = ddlDiner.options[ddlDiner.selectedIndex].text;
        // 更新隱藏欄位的值和名稱
        document.getElementById('<%= hidDiner.ClientID %>').value = selectedValue;
        document.getElementById('<%= hidDinnerName.ClientID %>').value = selectedText;
    }
</script>
<asp:dropdownlist ID="ddlDiner" runat="server" onchange="updateHiddenFields()">
    <asp:ListItem Text="請選擇" Value=""></asp:ListItem>
    <asp:ListItem Text="選項1" Value="1"></asp:ListItem>
    <asp:ListItem Text="選項2" Value="2"></asp:ListItem>
    <asp:ListItem Text="選項3" Value="3"></asp:ListItem>
</asp:dropdownlist>
<!-- 隱藏欄位用於存儲選擇的值和名稱 -->
<asp:hiddenfield ID="hidDiner" runat="server" />
<asp:hiddenfield ID="hidDiner_NAME" runat="server" />

這個做法比較囉嗦，但好處是使用者體驗會比較好，畫面因為PostBack發生閃爍現象，不過我喜歡用前者。

程式碼說明

  • ddlDiner控制項加上onchange="updateHiddenFields()" 這是代表按鈕按下去會呼叫畫面上的javascript
  • updateHiddenFields() 這個js 函數會負責把值寫入hidDiner　選項的文字放在 hidDiner_NAME

處理儲存時 將值存入表單的資料 FieldValue()

//DropDownDemoUC.ascx.cs
/// <summary>
/// 欄位的內容
/// </summary>
public override string FieldValue
{
    get
    {
        //回傳字串
        //取得表單欄位填寫的內容
        XmlDocument xmlDoc = new XmlDocument();
        var docEle = xmlDoc.CreateElement("FieldValue");
        xmlDoc.AppendChild(docEle);
        docEle.SetAttribute("Diner", hidDiner.Value);//晚餐選項值
        docEle.SetAttribute("DinerName", hidDiner_NAME.Value);//晚餐選項文字
        return xmlDoc.InnerXml;
    }
    set
    {
	//這個屬性不用修改
        base.m_fieldValue = value;
    }
}

這邊我們只要存hid的部分就好，值跟選項都需要儲存。

處裡將值讀回hid欄位 SetField()

/// <summary>
/// 顯示時欄位初始值
/// </summary>
/// <param name="versionField">欄位集合</param>
public override void SetField(Ede.Uof.WKF.Design.VersionField versionField)
{
    FieldOptional fieldOptional = versionField as FieldOptional;

    if (fieldOptional != null)
    {
        XmlDocument xmlDoc = new XmlDocument();

        if (!string.IsNullOrWhiteSpace(fieldOptional.FieldValue))
        {
            xmlDoc.LoadXml(fieldOptional.FieldValue);
            XmlNode node = xmlDoc.SelectSingleNode("FieldValue");
            if (node != null && (!IsPostBack))
            {
                hidDiner.Value = node.Attributes["Diner"]?.Value;
                hidDiner_NAME.Value = node.Attributes["DinerName"]?.Value;
            }
        }

        //...其他程式碼
    }
}

將選擇值選項還原回選項當中 EnabledControl

這邊的還原指的不是上一章將值還原回hid中，這邊指的是還原回選項當中

這邊一等一提供了EnableControl這個函數，需求不複雜的時候可以直接使用，需求如果複雜則是使用站點代碼進行判斷

/// <summary>
/// 設定元件狀態
/// </summary>
/// <param name="Enabled">是否啟用輸入元件</param>
public void EnabledControl(bool Enabled)
{
    if (Enabled)
    {
        ddlDiner.SelectedValue = hidDiner.Value;
    }
}

測試儲存功能是否正常

Image

填寫申請表 > 儲存 > 關閉視窗 > 開啟剛剛的草稿

這邊有個點是，如果你如果還原選項那邊沒寫，只有儲存沒關閉的話選項還是會在，但關閉後再開剛選擇的選項就會不見。

處理檢視(簽核/列印)畫面 EnabledControl

在簽核跟列印時要將選項隱藏起來，然後顯示選項值

這邊要在畫面上增加一個ASP:Lable

作為非編輯時候顯示選到的文字

<asp:label ID="lblDiner_SHOW" runat="server" Text="" ></asp:label>
<asp:dropdownlist ID="ddlDiner" runat="server" onchange="updateHiddenFields()">
    <asp:ListItem Text="請選擇" Value=""></asp:ListItem>
    <asp:ListItem Text="選項1" Value="1"></asp:ListItem>
    <asp:ListItem Text="選項2" Value="2"></asp:ListItem>
    <asp:ListItem Text="選項3" Value="3"></asp:ListItem>
</asp:dropdownlist>
<!-- 隱藏欄位用於存儲選擇的值和名稱 -->
<asp:hiddenfield ID="hidDiner" runat="server" />
<asp:hiddenfield ID="hidDiner_NAME" runat="server" />

這邊我習慣將Label名稱lbl開頭_SHOW結尾 ，如果想做成大量自動化時有一定的命名規則會有好處的，這邊我們先不使用自動化來做，先做原始的。

/// <summary>
/// 設定元件狀態
/// </summary>
/// <param name="Enabled">是否啟用輸入元件</param>
public void EnabledControl(bool Enabled)
{
    if (Enabled)
    {
        ddlDiner.SelectedValue = hidDiner.Value;
    }
    else
    {
        //不可修改時，將選項隱藏，改用Label顯示選項文字
        ddlDiner.Visible = false;
        lblDiner_SHOW.Text = hidDiner_NAME.Value;
    }
}

後端的部分同樣修改EnabledControl()

簽核時候顯示的標題 DisplayTitle

如果我們希望在簽核跟MAIL標題中，加入這個欄位，那我們叫需要改一下DisplayTitle

/// <summary>
/// 查詢顯示的標題
/// </summary>
public override string DisplayTitle
{
    get
    {
	//表單查詢或WebPart顯示的標題
	//回傳字串
        return hidDiner_NAME.Value;
    }
}

必填驗證 requiredfieldvalidator

UOF2的BPM的必填驗證只能使用前端做

簡單的作法是直接用ASP的必填驗證 asp:requiredfieldvalidator

在選項後加上這段就能進行驗證了

<asp:requiredfieldvalidator runat="server" ControlToValidate="ddlDiner" ErrorMessage="請選擇一個選項" ForeColor="Red"></asp:requiredfieldvalidator>

Image

成果如下

Image

信件內文 Message 回傳選項的文字

/// <summary>
/// 訊息通知的內容
/// </summary>
public override string Message
{
    get
    {
	//表單訊息通知顯示的內容
	//回傳字串 這邊回傳選項文字
        return hidDiner_NAME.Value;
    }
}

條件值 ConditionValue

 /// <summary>
 /// 外掛欄位的條件值
 /// </summary>
 public override string ConditionValue
 {
     get
     {
        //回傳字串
        //此字串的內容將會被表單拿來當做條件判斷的值 
        //這邊回傳欄位的值，代表條件判斷會以欄位的值來做判斷
        return hidDiner.Value;
     }
 }

這邊我準備三個流程

Image

建立三個條件

Image

流程部分要選條件式站點

Image

Image

這邊把條件跟流程配對一下，按下確定

Image

然後我們就可以來驗證流程了

Image

Image

如果出現找不到流程，建議關閉設計頁面再重新進來這邊，估計就會正常了。

前往一等一科技UOF2 教學列表

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *