🧠 AppML – Custom Functions with API: Extend AppML with Dynamic Logic

🧲 Introduction – Why Use Custom Functions in AppML?

While AppML simplifies data-driven web apps through models and controllers, you often need custom logic for API interactions, advanced validation, or event-driven workflows. That’s where custom functions in AppML come in. They give you the flexibility to:

• Enhance default behaviors
• Validate or format data before submitting
• Interact with external APIs or services
• Handle events like onload, onsubmit, onvalidate

🎯 In this guide, you’ll learn:

• How to define and use custom functions in AppML
• Hooking into lifecycle events like onvalidate, onshow, onaftershow
• Sending additional data to your APIs
• Real-world examples: API chaining, formatting, and alerts

---

⚙️ Where Do Custom Functions Live?

Custom functions are usually placed inside a separate JavaScript file defined via the appml-controller attribute:

<div 
  appml-data="api/users.php" 
  appml-model="models/user-model.json" 
  appml-controller="controllers/user-controller.js">
</div>

✅ user-controller.js

myAppML.onvalidate = function() {
  if (myAppML.data.email === "") {
    myAppML.message = "Email is required.";
    return false;
  }
  return true;
};

This function intercepts form validation before submission.

---

🔁 Lifecycle Hooks – Where to Insert Custom Logic

🧩 Hook Name	🔍 Purpose
oninit()	Called before data is fetched
onshow()	Runs after data is loaded but before rendering
onaftershow()	Runs after data is displayed
onvalidate()	Runs before form submission (return false to stop)
onsubmit()	Called right before sending data to server

---

🧪 Example 1 – Format Data Before Submit

myAppML.onsubmit = function() {
  myAppML.data.name = myAppML.data.name.trim().toUpperCase();
  myAppML.message = "Sending formatted name to server...";
  return true;
};

✔️ This ensures the data is formatted before being sent to the API.

---

🔐 Example 2 – Add Auth Token to API Request

If your API requires an authentication token, you can add it using custom headers or query parameters.

myAppML.oninit = function() {
  myAppML.dataurl += "?token=123ABC";
};

✅ Adds a query string with a token before loading data.

---

🔄 Example 3 – Chain API Calls

myAppML.onaftershow = function() {
  fetch("api/log-visit.php", {
    method: "POST",
    body: JSON.stringify({ page: "Users", time: new Date() })
  });
};

🧠 Logs each user page visit after the view has loaded.

---

💡 Example 4 – Conditional API Routing

myAppML.onsubmit = function() {
  if (myAppML.data.role === "Admin") {
    myAppML.dataurl = "api/save-admin.php";
  } else {
    myAppML.dataurl = "api/save-user.php";
  }
  return true;
};

🎯 Dynamically routes data to different APIs based on user role.

---

✅ Best Practices for Writing AppML Custom Functions

💡 Tip	✅ Benefit
Keep controller files small and modular	Easier to debug and maintain
Use console.log() for debugging	Helps test lifecycle hooks
Avoid overwriting core AppML properties	Prevents runtime issues
Use return false in onvalidate when needed	Stops invalid data submissions
Always sanitize inputs server-side	AppML logic doesn’t replace security

---

📌 Summary – Recap & Key Takeaways

Custom functions in AppML allow you to inject business logic into your app’s flow using built-in lifecycle hooks. Whether you’re validating input, formatting output, or routing data to APIs—custom functions make AppML apps more dynamic and powerful.

🔍 Key Takeaways:

• Use appml-controller to connect your logic file
• Lifecycle hooks like onvalidate, onshow, and onsubmit handle different stages
• Enhance API interactions dynamically (auth tokens, routing, chaining)
• Keep logic clear and scoped to AppML blocks

⚙️ With just a few lines of JavaScript, you can extend AppML’s declarative power with interactive logic and backend coordination.

---

❓ FAQs – Custom Functions with AppML API

---

❓ Are custom functions mandatory in AppML?
❌ No. They are optional but useful for advanced logic, validations, and interactivity.

---

❓ Can I use multiple custom functions in one controller?
✅ Yes. You can define all lifecycle hooks and custom utilities inside the same controller.

---

❓ Can I call an external API from inside onshow()?
✅ Absolutely. Use fetch() or XMLHttpRequest to call any external service.

---

❓ Does AppML support async/await inside controllers?
⚠️ Not directly. Use standard promises or callbacks to keep the flow synchronous.

---

❓ What happens if I don’t return true in onvalidate?
✅ The submission will be canceled. Always return true if validation passes.

---

Share Now :