Oracle APEX এ Progress Bar তৈরি: Dynamic Action দিয়ে ধাপে ধাপে গাইড

Oracle APEX এ Progress Bar তৈরি: Dynamic Action দিয়ে ধাপে ধাপে গাইড

Oracle APEX এ একটি Create বাটন চাপলে সাথে সাথে Process চলে যায়, ব্যবহারকারী কিছুই বোঝেন না। আগের পোস্টে আমরা Oracle APEX দিয়ে কীভাবে শুরু করবেন তা নিয়ে লিখেছিলাম; আজ সেই ধারাবাহিকতায় শিখব Oracle APEX progress bar বানানো: Employee তথ্যের ফর্মে Create চাপলে রিজিয়নের ভেতরে প্রগ্রেস বার চলবে, ১০০% হলে তবেই ডাটাবেসে রেকর্ড সেভ হবে। কোড কপি-পেস্ট করলেই কাজ করবে।

লাইভ ডেমো: Employee Information ফর্ম

নিচের ফর্মটি পূরণ করে Create চাপুন। ঘর ফাঁকা রেখে চাপলে কী হয় সেটাও দেখুন।

Employee Information

Employee Name Department << SELECT DEPARTMENT >>HRITAccountsSales Designation

1. Create ক্লিক এবং ঘর ফাঁকা কি না যাচাই
2. প্রগ্রেস বার ০% থেকে ১০০%
3. apex.page.submit('CREATE') দিয়ে পেজ সাবমিট
4. "Create Employee" Process চালু, রেকর্ড সেভ

দ্রষ্টব্য: এটি শুধু ডেমো। আসল APEX এ রেকর্ড ডাটাবেসের টেবিলে সেভ হয়।

কীভাবে কাজ করে

মূল কৌশল: বাটনকে সরাসরি Submit না করে Dynamic Action দিয়ে আটকানো, জাভাস্ক্রিপ্টে বার চালানো, আর ১০০% হলে কোড দিয়ে নিজেই সাবমিট করা।

ধাপে ধাপে সেটআপ (Page Designer)

1. Employee রিজিয়নের Advanced সেকশনে Static ID দিন: employee_region
2. তিনটি আইটেম বানান: P10_EMP_NAME, P10_DEPARTMENT, P10_DESIGNATION
3. বাটনের নাম CREATE। এর Action বদলে Defined by Dynamic Action করুন।
4. বাটনে Click Dynamic Action বানান। True Action: Execute JavaScript Code, কোড নিচে।
5. Processing এ Create Employee নামে PL/SQL Process বানান। When Button Pressed = CREATE।

১. Dynamic Action এর JavaScript

(function () {
  var regionId = "employee_region";
  var buttonId = "CREATE";
  var requiredItems = ["P10_EMP_NAME", "P10_DEPARTMENT", "P10_DESIGNATION"];
  var duration = 3000;
  var tick = 100, pct = 0;
  var pid = regionId + "_progress";
  var $btn = $("#" + buttonId);

  for (var i = 0; i < requiredItems.length; i++) {
    if (!$v(requiredItems[i])) {
      apex.message.alert("আগে সব তথ্য দিন");
      return;
    }
  }

  var $target = $("#" + regionId + " .t-Region-body");
  $("#" + pid).remove();
  $target.append('<div id="' + pid + '">' +
    '<div id="' + pid + '_text">0%</div>' +
    '<div style="background:#e3e3e3;height:18px;">' +
    '<div id="' + pid + '_bar" style="width:0%;height:100%;background:#0572ce;"></div></div></div>');
  $btn.prop("disabled", true);

  var timer = setInterval(function () {
    pct += 100 / (duration / tick);
    if (pct > 100) pct = 100;
    $("#" + pid + "_bar").css("width", pct + "%");
    $("#" + pid + "_text").text(Math.round(pct) + "%");
    if (pct >= 100) {
      clearInterval(timer);
      setTimeout(function () {
        apex.page.submit(buttonId);
      }, 500);
    }
  }, tick);
})();

২. Create Employee Process (PL/SQL)

INSERT INTO employees (emp_name, department, designation)
VALUES (:P10_EMP_NAME, :P10_DEPARTMENT, :P10_DESIGNATION);

পেজ সাবমিট হয়ে রিলোড হলে প্রগ্রেস বার আপনাআপনি মুছে যায়।

সচরাচর জিজ্ঞাসা

এই প্রগ্রেস বার কি আসল শতাংশ দেখায়?

না, এটি সময়-ভিত্তিক (simulated)। Process কত শতাংশ শেষ হলো তা ব্রাউজার জানতে পারে না। duration বদলে সময় কমানো-বাড়ানো যায়।

প্রগ্রেস বার দেখা যাচ্ছে না কেন?

রিজিয়নের Static ID এর বানান কোডের regionId এর সাথে হুবহু মিলছে কি না দেখুন।

১০০% হয়, কিন্তু রেকর্ড সেভ হয় না কেন?

Process এর When Button Pressed এ বাটনের নাম এবং apex.page.submit() এর নাম বড়-ছোট হাতের অক্ষরসহ মিলছে কি না দেখুন। এরর পেলে F12 চেপে Console ট্যাব দেখুন।

শেষ কথা

Dynamic Action, JavaScript আর apex.page.submit() মিলিয়ে সহজেই Oracle APEX এ প্রগ্রেস বার যোগ করা যায়। শুধু উপরের তিনটি নাম বদলে যেকোনো পেজে কোডটি ব্যবহার করুন। প্রশ্ন থাকলে কমেন্টে জানান।